/* unshaped.me — "Paper & fog" (design handoff 1a, 07.10.2026) */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/BodoniModa-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("fonts/Karla.woff2") format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }

:root {
  --bg: #f4efe7;
  --ink: #2a2622;
  --ink-2: #6f665d;
  --ink-hover: #403a34;
  --rule: rgba(42, 38, 34, .12);
  --rule-warm: #c7bcae;
  --track: rgba(42, 38, 34, .14);
  --fog-sand: #e4d6c3;
  --fog-mist: #cfd8d2;
  --fog-paper: #ece2d4;
  --glass: rgba(244, 239, 231, .82);
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(60px, 10vh, 120px);
  --colgap: clamp(28px, 5vw, 80px);
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--ink); text-decoration: none; }
button { font-family: inherit; }
section, footer { scroll-margin-top: 20px; }

/* grain overlay */
body.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* labels & type */
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.1; letter-spacing: -.02em; text-wrap: pretty; }
.body { font-size: 16px; line-height: 1.6; color: var(--ink-2); font-weight: 300; max-width: 420px; }

/* hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.blob { position: absolute; pointer-events: none; animation: drift 18s ease-in-out infinite; }
.blob-core { width: 100%; height: 100%; border-radius: 50%; filter: blur(70px); transition: transform .25s ease-out, opacity .25s ease-out; }
.blob-sand { width: 52vw; height: 44vw; min-width: 320px; min-height: 280px; left: 44%; top: 6%; }
.blob-sand .blob-core { background: var(--fog-sand); opacity: .9; }
.blob-mist { width: 40vw; height: 36vw; min-width: 260px; min-height: 240px; left: 64%; top: 36%; animation: drift2 24s ease-in-out infinite; }
.blob-mist .blob-core { background: var(--fog-mist); opacity: .8; }
.blob-paper { width: 30vw; height: 30vw; min-width: 240px; min-height: 240px; left: -8%; top: 56%; animation-duration: 26s; }
.blob-paper .blob-core { background: var(--fog-paper); opacity: .9; }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
body[data-fx="dots"] .ink { display: block; }

/* temporary comparison switch */
.fx-switch { position: fixed; right: 14px; bottom: 14px; z-index: 45; display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); background: var(--glass); border: 1px solid rgba(42,38,34,.15); border-radius: 999px; padding: 6px 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fx-switch button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; color: var(--ink-2); padding: 4px 6px; border-radius: 999px; cursor: pointer; }
.fx-switch button.is-on { background: var(--ink); color: var(--bg); }
body.has-mini .fx-switch { bottom: 96px; }

.nav { position: relative; display: flex; justify-content: space-between; align-items: center; padding: clamp(20px, 3vw, 30px) var(--gutter); }
.nav-mark { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); }
.nav-links { display: flex; gap: clamp(16px, 2.5vw, 30px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

.hero-body { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 8vh, 120px) var(--gutter) clamp(120px, 18vh, 180px); max-width: 900px; }
.h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(68px, 13vw, 168px); line-height: .9; letter-spacing: -.025em; }
.slogan { margin: clamp(20px, 3vh, 34px) 0 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; font-weight: 300; max-width: 520px; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: clamp(28px, 4vh, 40px); }
.btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--bg); border: 0; border-radius: 999px;
  padding: 14px 26px 14px 16px; min-height: 48px; cursor: pointer;
  font-weight: 500; font-size: 14px; letter-spacing: .04em;
}
.btn:hover { background: var(--ink-hover); }
.tri { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.platforms { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; letter-spacing: .02em; }
.platforms a { color: var(--ink-2); border-bottom: 1px solid var(--rule-warm); padding: 4px 0; }
.platforms a:hover { color: var(--ink); }

/* albums */
.albums { position: relative; padding: var(--section) var(--gutter) 40px; }
.albums .label { margin-bottom: clamp(28px, 5vh, 56px); }
.album {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--colgap); align-items: start; margin-bottom: clamp(80px, 14vh, 140px);
}
.cover { display: block; width: 100%; max-width: 440px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(42, 38, 34, .35); justify-self: start; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-alt .cover { justify-self: end; }
.album-alt .album-text { order: -1; }
.album-text { min-width: 0; }
.album-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 60px); line-height: 1; letter-spacing: -.02em; }
.album-meta { font-size: 13px; color: var(--ink-2); margin: 14px 0 clamp(20px, 3vh, 36px); }
.rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 44px; gap: 12px; align-items: center;
  border-top: 1px solid var(--rule); font-size: 16px; min-height: 48px;
}
.row.is-current { background: linear-gradient(90deg, rgba(42, 38, 34, .05), transparent); }
.row-state { display: flex; align-items: center; justify-content: center; width: 36px; height: 48px; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 0; }
.row-state:hover { color: var(--ink-2); }
.row-state .num { font-size: 13px; color: var(--ink-2); }
.row-state .g-pause, .row-state .g-play { display: none; }
.row.is-playing .row-state .num, .row.is-paused .row-state .num { display: none; }
.row.is-playing .row-state .g-pause { display: flex; }
.row.is-paused .row-state .g-play { display: block; }
.g-pause { display: flex; gap: 3px; }
.g-pause i { display: block; width: 2px; height: 12px; background: currentColor; }
.g-play { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; margin-left: 2px; }
.row-title { text-align: left; background: none; border: 0; padding: 14px 0; cursor: pointer; font-size: 16px; font-weight: 400; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-current .row-title { font-weight: 500; }
.row-title:hover { color: var(--ink-2); }
.row-dur { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row-dl { display: flex; align-items: center; justify-content: center; width: 44px; height: 48px; color: var(--ink-2); }
.row-dl:hover { color: var(--ink); }

/* remixes */
.remixes {
  position: relative; padding: clamp(40px, 8vh, 80px) var(--gutter) var(--section);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--colgap); align-items: center;
}
.remixes .label { margin-bottom: 28px; }
.remixes .h2 { max-width: 420px; }
.embed { min-height: 300px; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg, #eae2d6 0 10px, #f1eae0 10px 20px); }
.embed iframe { display: block; width: 100%; height: 420px; border: 0; }

/* interactive teaser */
.teaser {
  position: relative; margin: 0 var(--gutter); padding: clamp(60px, 10vh, 110px) 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--colgap); align-items: center;
}
.teaser .label { margin-bottom: 28px; }
.teaser .body { margin: 26px 0 0; }
.touch { position: relative; height: clamp(280px, 40vw, 420px); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.rip { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: ripple 4s ease-out infinite; }
.rip-2 { animation-delay: 1.3s; }
.rip-3 { animation-delay: 2.6s; }
.dot-main { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }
.dot { position: absolute; border-radius: 50%; background: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; font-size: 13px; color: var(--ink-2); border: 1px solid rgba(42, 38, 34, .2); border-radius: 999px; padding: 12px 18px; min-height: 44px; }
.pill span { opacity: .5; }
.pill:hover { color: var(--ink); }

/* footer */
.foot {
  position: relative; padding: clamp(40px, 6vh, 60px) var(--gutter) 160px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end;
}
.foot-mark { font-family: var(--serif); font-size: 26px; margin-bottom: 10px; }
.foot-mail { font-size: 14px; color: var(--ink-2); }
.foot-mail:hover, .foot-links a:hover { color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13px; }
.foot-links a { color: var(--ink-2); }

/* sticky mini-player */
.mini {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(42, 38, 34, .1);
  padding: 10px clamp(16px, 5vw, 56px) max(10px, env(safe-area-inset-bottom));
}
.mini[hidden] { display: none; }
.mini-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.mini-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--bg); }
.mini-btn:hover { background: var(--ink-hover); }
.mini-btn .g-pause { display: none; }
.mini-btn .g-pause i { width: 3px; height: 14px; }
.mini-btn .g-play { display: block; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; margin-left: 3px; }
.mini.is-playing .mini-btn .g-pause { display: flex; }
.mini.is-playing .mini-btn .g-play { display: none; }
.mini-meta { flex: 1; min-width: 0; }
.mini-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-album { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vol { display: flex; align-items: center; gap: 10px; height: 28px; cursor: pointer; touch-action: none; padding: 0 4px; }
.vol span { font-size: 12px; color: var(--ink-2); }
.vol-track { width: clamp(48px, 8vw, 90px); height: 3px; background: var(--track); border-radius: 2px; position: relative; }
.vol-fill { height: 100%; background: var(--ink); border-radius: 2px; }
.progress { position: relative; height: 24px; display: flex; align-items: center; margin-top: 4px; cursor: pointer; touch-action: none; outline: none; }
.p-track { width: 100%; height: 3px; background: var(--track); border-radius: 2px; }
.p-fill { position: absolute; left: 0; height: 3px; background: var(--ink); border-radius: 2px; width: 0; }
.p-thumb { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--bg); transition: width .12s, height .12s, margin-left .12s; }
.progress.is-seeking .p-thumb, .progress:focus-visible .p-thumb { width: 18px; height: 18px; margin-left: -9px; }

@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.06); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes drift2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 3%) scale(.95); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes ripple { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blob, .rip { animation: none; } }

@media (max-width: 560px) {
  .nav { gap: 12px; }
  .nav-links { gap: 12px; font-size: 11px; letter-spacing: .1em; flex-wrap: wrap; justify-content: flex-end; }
  .vol { display: none; }
}