/* ==================================================================
   Matter at Hand Records — layout
   ================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--flame);
  font-family:var(--text);
  font-size:var(--t-m);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
figure,blockquote,h1,h2,h3,p,ul,ol{margin:0}
a{color:inherit;text-decoration:none}
/* Das Siegel ist der Stempel: wo es auftaucht, laesst sich etwas oeffnen. */
a,button,summary{cursor:url("../img/cursor-seal.png") 14 14, pointer}
::selection{background:var(--flame);color:var(--ink)}
.s--flame ::selection{background:var(--ink);color:var(--flame)}

/* --- helpers ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mono{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:var(--tr-mono);text-transform:uppercase;line-height:1.5;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-4em;z-index:100;background:var(--flame);color:var(--ink);padding:.6em 1em}
.skip:focus{top:1rem}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* --- section frame ------------------------------------------------ */
.sect{position:relative;padding-block:var(--sp-5)}
.sect > .wrap{position:relative;z-index:2}

/* the staff: one vertical line, dead centre, through every section  */
.sect::before{
  content:"";position:absolute;inset-block:0;left:50%;
  width:var(--staff);margin-left:calc(var(--staff) / -2);
  background:currentColor;opacity:.22;z-index:1;
  transform:scaleY(var(--staff-scale,1));transform-origin:top center;
}
.sect--nostaff::before{display:none}

/* the horizon: hand-drawn divider where the page inverts */
.horizon{display:block;width:100%;height:clamp(10px,1.4vw,16px);position:relative;z-index:3;margin-block:-1px}
.horizon > svg{width:100%;height:100%}
/* Die Siegel-Glyphe sitzt auf jedem Horizont am Fuss des Stabs —
   genau wie im Artwork. */
.horizon__seal{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:4;
  width:clamp(30px,3.4vw,46px);aspect-ratio:1;display:grid;place-items:center;
  border-radius:3px;
}
.horizon__seal svg{width:74%;height:74%}
.horizon--ink-flame .horizon__seal{background:var(--flame);color:var(--ink)}
.horizon--flame-ink .horizon__seal{background:var(--ink);color:var(--flame)}

/* --- section head ------------------------------------------------- */
.head{display:flex;gap:var(--sp-2);align-items:baseline;justify-content:space-between;
  border-top:var(--hair) solid currentColor;padding-top:var(--sp-1);margin-bottom:var(--sp-4)}
.head__n{}

/* ==================================================================
   Top bar
   ================================================================== */
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-2) var(--gut);
  color:var(--flame);mix-blend-mode:difference;
  pointer-events:none;
  transition:color .3s var(--ease);
}
.js .topbar{mix-blend-mode:normal}
.js .topbar.on-flame{color:var(--ink)}
.js .topbar.on-ink{color:var(--flame)}
.topbar > *{pointer-events:auto}
.bar__cat{margin:0}
.bar__idx{display:flex;gap:1.1em}
.bar__idx a{transition:text-decoration-color .25s var(--ease)}
.bar__idx a:hover{text-decoration:underline;text-underline-offset:.35em}
.bar__idx a[aria-current="true"]{text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
@media (max-width:47.99rem){ .bar__cat{display:none} }
.lang{display:flex;gap:.55em;align-items:center}
.lang button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;color:inherit;cursor:pointer;
}
.lang button[aria-pressed="true"]{font-weight:500;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}
.lang span{opacity:.75}

/* ==================================================================
   1 · Hero
   ================================================================== */
.hero{min-height:100svh;display:flex;flex-direction:column;
  padding-block:calc(var(--sp-3) + 2.2rem) var(--sp-2);position:relative;overflow:clip}
.hero::before{display:none}

.hero > .wrap:first-child{margin-block:auto}
.hero__art{
  position:relative;margin-inline:auto;
  width:min(46vh, 74vw, 500px);aspect-ratio:1;
}
.hero__art svg{width:100%;height:100%;overflow:visible}

/* two states of the same drawing: line (default) and printed (fill).
   The printed state stands in for the Blender loop until it exists. */
.art-ground{fill:none}
.hero__art .art-fill{opacity:0}
.art-line{stroke-width:1.2px}

/* --- Die grosse Idee laeuft in CSS, nicht in JS: der Hero zeichnet sich,
       sobald das SVG da ist — ohne auf 120 kB Library zu warten. --------- */
@keyframes mah-draw{to{stroke-dashoffset:0}}
@keyframes mah-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -.12em 0)}}
@keyframes mah-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .hero__art .ln{stroke-dasharray:1000;stroke-dashoffset:1000;
    animation:mah-draw 1.5s linear forwards}
  .hero__art .ln:nth-child(1){animation-duration:.9s}
  .hero__art .ln:nth-child(2){animation-duration:1.5s;animation-delay:.15s}
  .hero__art .ln:nth-child(3),
  .hero__art .ln:nth-child(4){animation-duration:.6s;animation-delay:1.1s}
  .hero__mark h1 .l1,.hero__mark h1 .l2{animation:mah-wipe .95s cubic-bezier(.16,1,.3,1) both}
  .hero__mark h1 .l1{animation-delay:.55s}
  .hero__mark h1 .l2{animation-delay:.64s}
  .hero__sub{animation:mah-in .7s ease .95s both}
  .hero__scroll{animation:mah-in .7s ease 1.15s both}
}
.hero__art.can-print .art-fill{fill:var(--ink);opacity:var(--print,0)}
.hero__art.can-print .art-ground{fill:var(--flame)}
.hero__art.can-print .art-line{opacity:calc(1 - var(--print,0))}
.hero__art.has-loop .art-fill{opacity:0}
.hero__art.has-loop .hero__loop{opacity:var(--print,0)}
.hero__art{transform:scale(calc(1 - .12 * var(--print,0)));transform-origin:center}

/* assets/video/mah-logo.{webm,mp4} — Blender-Loop 720², 7,5 s; poster = erster Frame */
.hero__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}

/* The masthead is measured to the container, not guessed:
   Young Serif caps at 100px → "at Hand" 4.83× , "Matter at Hand" 9.63× the size. */
.hero__mark{margin-top:var(--sp-2)}
.hero__mark h1{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:calc((100vw - 2 * var(--gut)) / 5.06);
  line-height:var(--lh-tight);letter-spacing:-.02em;text-transform:uppercase;
}
.hero__mark h1 .l1,.hero__mark h1 .l2{display:block;will-change:clip-path}
.hero__sub{display:flex;flex-wrap:wrap;gap:.5em 2.4em;margin-top:var(--sp-2);
  border-top:var(--hair) solid currentColor;padding-top:var(--sp-1)}
.hero__sub .records{margin-left:auto}
.hero__scroll{margin:var(--sp-2) 0 0}

@media (min-width:56rem){
  .hero__art{width:min(42vh,32vw,400px)}
  .hero__mark h1{font-size:calc((min(100vw, var(--max)) - 2 * var(--gut)) / 10.05)}
  .hero__mark h1 .l1,.hero__mark h1 .l2{display:inline-block}
  .hero__mark h1 .l2::before{content:"\00a0"}
}

/* ==================================================================
   2 · Release MAH01
   ================================================================== */
.rel{display:grid;gap:var(--sp-4);grid-template-columns:1fr}
.rel__cover{position:relative;aspect-ratio:1}
.rel__cover svg{width:100%;height:100%}
.rel__cover figcaption{margin-top:var(--sp-1)}
.rel__meta h2{margin:0 0 var(--sp-2);font-family:var(--display);font-weight:400;
  font-size:var(--t-xl);line-height:.95;letter-spacing:-.01em}
.rel__cat{display:block;margin-bottom:var(--sp-1)}
.rel__facts{display:flex;flex-wrap:wrap;gap:.4em 1.6em;margin:0 0 var(--sp-3);padding:0;list-style:none}

.tracks{list-style:none;margin:0 0 var(--sp-3);padding:0;border-top:var(--hair) solid currentColor}
.tracks li{border-bottom:var(--hair) solid currentColor}
.tracks li{
  display:grid;grid-template-columns:2.8em minmax(0,1fr) clamp(80px,12vw,150px);
  align-items:center;gap:var(--sp-2);padding:.9em 0;
}
.tracks .n{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono)}
.tracks .t{font-size:clamp(1.2rem,2.3vw,1.85rem);font-family:var(--display);font-weight:400;line-height:1.05;text-wrap:balance}
.wave{display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;height:1.5em;opacity:.45}
.wave i{display:block;flex:0 0 2px;background:currentColor;height:var(--h)}

.rel__sound{max-width:44ch;margin:0 0 var(--sp-3)}
.embed{border:var(--hair) solid currentColor;padding:var(--sp-2);margin-bottom:var(--sp-3)}
.embed p{margin:0 0 var(--sp-2);max-width:46ch}
.btn{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;
  border:var(--hair) solid currentColor;padding:.85em 1.3em;background:none;color:inherit;cursor:pointer;
}
.s--flame .btn:hover,.s--flame .btn:focus-visible{background:var(--ink);color:var(--flame)}
.s--ink   .btn:hover,.s--ink   .btn:focus-visible{background:var(--flame);color:var(--ink)}
.embed__frame{aspect-ratio:1/1.1;width:100%;border:0}
.links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.links a{border-bottom:var(--hair) solid currentColor;padding-bottom:.2em}
.links a:hover{opacity:.65}

@media (min-width:56rem){
  .rel{grid-template-columns:minmax(0,50fr) minmax(0,50fr);gap:var(--sp-3);align-items:start}
  .rel__cover{position:sticky;top:18vh}
}

/* ==================================================================
   3 · Stance
   ================================================================== */
.stance{min-height:82svh;display:flex;align-items:center}
.stance p{
  margin:0 0 var(--sp-2);max-width:20ch;
  font-family:var(--display);font-weight:400;font-size:var(--t-xl);
  line-height:1.04;letter-spacing:-.01em;
}
.stance p:nth-child(2){margin-left:auto;text-align:right}
.stance p:last-of-type{margin-inline:auto;text-align:center;max-width:24ch}

/* ==================================================================
   4 · Catalogue
   ================================================================== */
.cat{list-style:none;margin:0;padding:0;border-top:var(--hair) solid currentColor}
.cat li{border-bottom:var(--hair) solid currentColor}
.cat a,.cat .row{
  display:grid;grid-template-columns:6.5em 1fr;gap:var(--sp-1) var(--sp-2);
  align-items:baseline;padding:var(--sp-3) 0;position:relative;
}
.cat .no{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono)}
.cat .ttl{font-family:var(--display);font-size:clamp(1.35rem,2.8vw,2.2rem);line-height:1.02}
.cat .by{display:block;font-family:var(--text);font-size:var(--t-s);margin-top:.3em}
.cat .dt{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--tr-mono)}

.cat a .no{transition:background .25s var(--ease),color .25s var(--ease),padding .25s var(--ease)}
.cat a .ttl{transition:transform .35s var(--ease)}
.cat a:hover .no,.cat a:focus-visible .no{padding:.25em .5em;margin:-.25em -.5em}
.s--flame .cat a:hover .no,.s--flame .cat a:focus-visible .no{background:var(--ink);color:var(--flame)}
.s--ink   .cat a:hover .no,.s--ink   .cat a:focus-visible .no{background:var(--flame);color:var(--ink)}
.cat a:hover .ttl,.cat a:focus-visible .ttl{transform:translateX(.35em)}
@media (min-width:48rem){
  .cat a,.cat .row{grid-template-columns:6.5em 1fr 9em}
  .cat .dt{text-align:right}
}
/* cover that follows the cursor (JS adds .is-on) */
.trail{
  position:fixed;top:0;left:0;z-index:30;width:clamp(150px,16vw,230px);aspect-ratio:1;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  border:var(--hair) solid var(--flame);background:var(--ink);
}
.trail svg{width:100%;height:100%}
.trail.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ==================================================================
   5 · Process
   ================================================================== */
.proc{display:grid;gap:var(--sp-3)}
.proc figure{margin:0}
.proc__quote{margin:0;max-width:30ch}
.proc__quote p{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.14;margin:0 0 var(--sp-2);letter-spacing:-.01em}
.proc__quote cite{font-style:normal}
.proc__note{max-width:42ch}
.ph{
  display:flex;align-items:flex-start;padding:var(--sp-2);margin:0;
  border:var(--hair) dashed currentColor;font-family:var(--mono);
  font-size:var(--t-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;line-height:1.7;
}
.ph--wide{aspect-ratio:16/7}
.ph--tall{aspect-ratio:4/5}
.ph--sq{aspect-ratio:1}
@media (min-width:56rem){
  .proc{grid-template-columns:repeat(12,1fr);gap:var(--sp-4) var(--sp-2);align-items:start}
  .proc__a{grid-column:1/-1}
  .proc__q{grid-column:1/7}
  .proc__t{grid-column:8/-1}
  .proc__c{grid-column:8/-1}
}

.tally{display:grid;gap:var(--sp-3);margin:0}
.tally div{border-top:var(--hair) solid currentColor;padding-top:var(--sp-1)}
.tally dt{font-family:var(--display);font-weight:400;
  font-size:clamp(3.4rem,7vw,6.5rem);line-height:.82;letter-spacing:-.03em}
.tally dd{margin:var(--sp-1) 0 0;max-width:30ch;line-height:1.75}

/* ==================================================================
   6 · Demos
   ================================================================== */
.demos{display:grid;gap:var(--sp-3);align-items:start}
.demos h2{margin:0;font-family:var(--display);font-weight:400;font-size:var(--t-xxl);
  line-height:.9;letter-spacing:-.02em}
.demos__body{max-width:44ch}
.demos__body p{margin:0 0 var(--sp-2)}
.seal{width:clamp(72px,9vw,120px);color:currentColor}
.seal svg{width:100%;height:auto;fill:currentColor}
@media (min-width:56rem){
  .demos{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
}

/* ==================================================================
   Footer
   ================================================================== */
.foot{padding-block:var(--sp-4) var(--sp-3)}
.foot__doors{display:grid;gap:0;border-top:var(--hair) solid currentColor;margin-bottom:var(--sp-4)}
.foot__doors a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
  padding:var(--sp-2) 0;border-bottom:var(--hair) solid currentColor;
}
.foot__doors .nm{font-family:var(--display);font-size:var(--t-l);line-height:1}
.foot__doors a .nm{transition:transform .35s var(--ease)}
.foot__doors a:hover .nm,.foot__doors a:focus-visible .nm{transform:translateX(.35em)}
.foot__legal{display:grid;gap:var(--sp-3)}
.foot__legal h2{margin:0 0 var(--sp-1);font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:var(--tr-mono);text-transform:uppercase;font-weight:500}
.foot__legal p{margin:0 0 .6em;font-size:var(--t-s);line-height:1.6;max-width:60ch}
.foot__end{display:flex;flex-wrap:wrap;gap:.6em 2em;justify-content:space-between;
  border-top:var(--hair) solid currentColor;margin-top:var(--sp-3);padding-top:var(--sp-1)}
@media (min-width:56rem){ .foot__legal{grid-template-columns:1fr 1fr;gap:var(--sp-4)} }

/* ==================================================================
   Grain — paper, not decoration. ≤4%, switchable.
   ================================================================== */
.grain{
  position:fixed;inset:-50%;z-index:50;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='200' height='200' filter='url(%23n)'/></svg>");
}
html[data-grain="off"] .grain{display:none}

/* ==================================================================
   Motion — Progressive Enhancement.
   Die .js-Klasse setzt ein Inline-Skript im <head>; bleibt main.js aus,
   nimmt ein Timeout sie wieder weg und alles ist sichtbar.
   Jede Bewegung ist eine Maske: die Farbe laeuft aufs Papier.
   Kein "fade-in-up" auf jedem Element.
   ================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .head,
  .js .cat li,
  .js .rel__cover,
  .js .proc .ph,
  .js .stance p{
    clip-path:inset(0 100% 0 0);
    transition:clip-path .95s var(--ease) var(--rd,0s);
  }
  .js .rel__cover,
  .js .proc .ph,
  .js .stance p{clip-path:inset(0 0 100% 0);transition-duration:1.1s}
  .js .head.is-in,
  .js .cat li.is-in,
  .js .rel__cover.is-in,
  .js .proc .ph.is-in,
  .js .stance p.is-in{clip-path:inset(-.15em -.15em -.15em 0)}

  .js .horizon svg{transform:scaleX(0);transform-origin:left center;
    transition:transform 1.1s var(--ease)}
  .js .horizon svg.is-in{transform:scaleX(1)}

  .js .tracks li .wave i{transform:scaleY(0);transform-origin:bottom;
    transition:transform .5s var(--ease)}
  .js .tracks li.is-in .wave i{transform:scaleY(1)}
  .js .tracks li .wave i:nth-child(4n+1){transition-delay:.02s}
  .js .tracks li .wave i:nth-child(4n+2){transition-delay:.06s}
  .js .tracks li .wave i:nth-child(4n+3){transition-delay:.10s}
  .js .tracks li .wave i:nth-child(4n)  {transition-delay:.14s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* horizon colour pairs */
.horizon--ink-flame{background:var(--flame)}
.horizon--ink-flame path{fill:var(--ink)}
.horizon--flame-ink{background:var(--ink)}
.horizon--flame-ink path{fill:var(--flame)}