/* tapebox.music — stylesheet.
   Concept "Play": the page opens on nothing but a cassette whose two hubs turn. The real site
   sits, shrunk, behind the white piece of its window; "Play" zooms into the window and the site
   takes over the screen — the cover is fixed, so it cannot be scrolled back. The site itself is quiet:
   one column, paper and ink, Space Grotesk for the display voice, DM Mono for labels and machine words.
   No JavaScript, no external resources: the fonts are self-hosted in assets/fonts/ (SIL OFL 1.1). */

@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-var.woff") format("woff");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"DM Mono";src:url("fonts/DMMono-Regular.woff") format("woff");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --ink:#1F1B18;
  --ink-strong:#15110F;
  --paper:#F7F4EF;
  --paper-deep:#EEE8DF;
  --white:#FFFFFF;
  --mute:#6B655E;
  --faint:#8F8A83;
  --hairline:#DCD6CC;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:72rem;
  --col:42rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:clamp(1.25rem,4vw,2.5rem);padding-right:clamp(1.25rem,4vw,2.5rem)}
.skip{position:absolute;left:-999px;top:0;z-index:20}
.skip:focus{left:1rem;top:1rem;background:var(--white);padding:.5rem .75rem;border-radius:6px}

/* --- The cover: the cassette, fixed to the screen, its hubs turning, and Play ---------
   Geometry: the photo is --photo-vw wide (breakpoints below), centred, a little above the middle
   so Play fits below. The white piece of the middle window is cut out of the cover with a mask
   (img/hole.png, from tools/cassette-cover.py); behind it the real site sits, scaled by --s0 so
   that its full width fits the hole. Play targets #site: the cover zooms about the hole and fades,
   the site grows to full size. Without :has() support the cover is a plain first screen instead. */
:root{
  --photo-vw:62;
  --photo-w:calc(var(--photo-vw) * 1vw);
  --photo-h:calc(var(--photo-w) * 1024 / 1536);
  --photo-x:calc(50vw - var(--photo-w) / 2);
  --photo-y:calc(50svh - var(--photo-h) / 2 - 2.25rem);
  /* the white piece of the window, as fractions of the photo — printed by tools/cassette-cover.py */
  --win-x:.4642;--win-y:.4141;--win-w:.0801;--win-h:.1621;
  --hole-x:calc(var(--photo-x) + var(--photo-w) * var(--win-x));
  --hole-y:calc(var(--photo-y) + var(--photo-h) * var(--win-y));
  --hole-w:calc(var(--photo-w) * var(--win-w));
  --hole-h:calc(var(--photo-h) * var(--win-h));
  --s0:calc(var(--photo-vw) / 100 * var(--win-w));
}
@media (max-width:48rem){:root{--photo-vw:92}}
@media (min-width:48rem) and (max-height:46rem){:root{--photo-vw:50}}
@media (min-width:48rem) and (max-height:36rem){:root{--photo-vw:40}}
@media (min-width:110rem){:root{--photo-vw:48}}

.lid{position:relative;z-index:10}
.cover{position:relative;height:100vh;height:100svh;background:var(--white)}
.deck{position:absolute;left:var(--photo-x);top:var(--photo-y);width:var(--photo-w)}
.photo{display:block;width:100%;height:auto}
/* hub cut-outs: centre and size in % of the photo, from tools/cassette-cover.py */
.hub{position:absolute;left:var(--hub-x);top:var(--hub-y);width:var(--hub-d);height:auto;translate:-50% -50%;animation:turn 2.6s linear infinite}
.hub--l{--hub-x:31.71%;--hub-y:48.97%;--hub-d:9.38%}
.hub--r{--hub-x:67.51%;--hub-y:48.97%;--hub-d:9.38%}
@keyframes turn{to{rotate:-360deg}}   /* both reels turn anticlockwise on playback */
@keyframes preview-scroll{
  0%,7%{transform:translate(var(--hole-x),var(--hole-y)) scale(var(--s0)) translateY(0)}
  93%,100%{transform:translate(var(--hole-x),var(--hole-y)) scale(var(--s0)) translateY(calc(-100% + var(--hole-h) / var(--s0)))}
}

.play{
  position:absolute;left:50%;top:calc(var(--photo-y) + var(--photo-h) * 0.934);translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.42rem;
  cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-weight:500;text-decoration:none;
  padding:.5rem .95rem;border-radius:.22rem;
  transition:background .18s ease,color .18s ease;
}
.play-word{font-size:clamp(1.3rem,2.8vw,1.65rem);letter-spacing:.3em;text-indent:.3em;line-height:1}
.play-tri{
  width:0;height:0;
  border-left:clamp(1.05rem,2.4vw,1.4rem) solid currentColor;
  border-top:clamp(.42rem,1vw,.56rem) solid transparent;
  border-bottom:clamp(.42rem,1vw,.56rem) solid transparent;
}
.play:hover,.play:focus-visible{background:var(--ink);color:var(--paper)}
.play:active{scale:.97}

.play-toggle{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;margin:-1px;clip:rect(0 0 0 0)}
.site{position:relative;z-index:1;background:var(--paper)}

@supports selector(:has(a)){
  /* nothing to scroll while the cover is up: the site is one screen tall and clipped (iOS ignores overflow on body alone) */
  html:has(.lid),body:has(.lid){overflow:hidden}
  /* the frame clips the zooming cover, so the 22x scaled box never widens the page */
  .lid{position:fixed;inset:0;overflow:clip;transition:visibility 0s linear 1.1s}
  .cover{
    position:absolute;inset:0;height:auto;
    transform-origin:calc(var(--hole-x) + var(--hole-w) / 2) calc(var(--hole-y) + var(--hole-h) / 2);
    -webkit-mask-image:url("img/hole.png"),linear-gradient(#000 0 0);
    -webkit-mask-size:var(--photo-w) auto,auto;
    -webkit-mask-position:var(--photo-x) var(--photo-y),0 0;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-composite:xor;
    mask-image:url("img/hole.png"),linear-gradient(#000 0 0);
    mask-size:var(--photo-w) auto,auto;
    mask-position:var(--photo-x) var(--photo-y),0 0;
    mask-repeat:no-repeat;
    mask-composite:exclude;
    transition:transform 1.1s cubic-bezier(.7,0,.3,1),opacity .4s ease .7s;
  }
  /* the site, shrunk into the hole; its top-left corner sits on the hole's top-left corner */
  /* preview: the whole page sits scaled in the window and slowly scrolls through it (the tape 'plays' the site) */
  body:has(.lid) .site{transform-origin:0 0;transform:translate(var(--hole-x),var(--hole-y)) scale(var(--s0));transition:transform .9s cubic-bezier(.7,0,.3,1);animation:preview-scroll 16s ease-in-out infinite alternate}
  /* played: any anchor inside the site keeps the state, so the nav links do not bring the cover back */
  html:has(.play-toggle:checked),body:has(.play-toggle:checked),html:has(#site:target),html:has(.site :target),body:has(#site:target),body:has(.site :target){overflow:auto}
  body:has(.play-toggle:checked) .lid,body:has(#site:target) .lid,body:has(.site :target) .lid{visibility:hidden;pointer-events:none}
  body:has(.play-toggle:checked) .cover,body:has(#site:target) .cover,body:has(.site :target) .cover{transform:scale(22);opacity:0}
  body:has(.play-toggle:checked) .site,body:has(#site:target) .site,body:has(.site :target) .site{height:auto;overflow:visible;transform:none;animation:none}
}
@media (prefers-reduced-motion:reduce){.hub{animation:none}.lid,.cover,.site{transition:none}.site{animation:none}}

/* --- The site: untitled-calm + tapebox app (warm paper, rounded cards, soft shadow) --- */
:root{
  --line:#E7E1D7;
  --shadow-sm:0 1px 2px rgba(31,27,24,.05),0 8px 22px -12px rgba(31,27,24,.14);
  --radius:22px;
}
.site{position:relative;z-index:1;background:var(--paper);color:var(--ink)}

/* header */
.site-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.25rem,4vw,2.5rem);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line)}
.site-top .brand{display:flex;align-items:center}
.site-top .brand img{height:15px;width:auto;display:block}
.site-top .nav,.top .nav{display:flex;gap:1.75rem;font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.site-top .nav a,.top .nav a{text-decoration:none;color:var(--mute)}
.site-top .nav a:hover,.top .nav a:hover{color:var(--ink)}

/* layout */
.page{max-width:64rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.block{padding:2rem 0 0}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:0 0 2rem;display:flex;align-items:center;gap:.85rem}
.label::after{content:"";height:1px;flex:1;background:var(--line)}

/* hero */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  padding:clamp(3.5rem,11vh,7.5rem) 0 0}
.hero h1{margin:0;font-weight:500;letter-spacing:-.045em;line-height:.95;font-size:clamp(2.9rem,8vw,6rem);color:var(--ink-strong)}
.hero h1 .b{display:block}
.hero .lede{margin:0;font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.5;color:var(--mute);max-width:34rem}
.hero .lede strong{color:var(--ink);font-weight:500}
.hero-cta{margin:.5rem 0 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:500;font-size:1rem;
  background:var(--ink-strong);color:var(--paper);padding:.9rem 1.6rem;border-radius:999px;
  box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);color:var(--paper);box-shadow:0 14px 26px -12px rgba(31,27,24,.45)}

/* what — feature cards in the app's language */
.features{display:grid;gap:1rem}
.feature{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow-sm)}
.tile{width:clamp(150px,20vw,196px);height:auto;flex:none;display:block;border-radius:10px}
.feature h3{margin:0 0 .35rem;font-size:1.3rem;font-weight:500;letter-spacing:-.02em;color:var(--ink-strong)}
.feature p{margin:0 0 .85rem;color:var(--mute);max-width:46ch}
.chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.chip.open::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}

/* plans */
.plans{display:grid;gap:1rem;margin-top:2.5rem}
@media (min-width:44rem){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-sm)}
.plan--pro{background:linear-gradient(180deg,#fff,#FBF8F3)}
.plan .tag{display:flex;align-items:center;gap:.6rem;margin:0 0 .5rem;font-size:1.25rem;font-weight:500;color:var(--ink-strong)}
.plan .planned{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem}
.plan-lede{margin:0 0 1.1rem;color:var(--mute)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.plan li{position:relative;padding-left:1.4rem;color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--ink)}

/* who */
.team{display:grid;gap:1rem}
@media (min-width:40rem){.team{grid-template-columns:1fr 1fr}}
.person{display:flex;align-items:center;gap:1.25rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.person img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.person h3{margin:0;font-size:1.15rem;font-weight:500;color:var(--ink-strong)}
.person .role{margin:.15rem 0 .5rem;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.person .email{margin:0 0 .55rem;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--faint)}
.person a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.person .links{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin-top:.1rem}
.person a:hover{color:var(--ink);border-color:var(--ink)}
.contact{margin-top:3rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.contact .reads{margin:0;color:var(--mute)}
.contact .mail{margin:0}
.contact .mail a{font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:-.02em;color:var(--ink-strong);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.contact .mail a:hover{color:#000}

/* footer */
.foot{max-width:64rem;margin:0 auto;padding:2rem clamp(1.25rem,4vw,2.5rem) 3rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:.9rem;color:var(--mute)}
.foot p{margin:0}
.foot nav{display:flex;gap:1.25rem;font-family:var(--mono);font-size:13px}
.foot a{color:var(--mute);text-decoration:none}.foot a:hover{color:var(--ink)}
.foot .rewind{font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.foot .fine{flex-basis:100%;font-size:12px;color:var(--faint)}

@media (max-width:40rem){
  .feature{grid-template-columns:1fr;gap:1rem}
  .tile{width:100%;height:auto}
}

/* --- Legal pages: their own small header ------------------------------------------- */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.95rem;padding-bottom:.95rem}
.top .brand{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.top .brand img{display:block;height:15px;width:auto}

/* --- Legal pages ---------------------------------------------------------- */
.back{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--mute);text-decoration:none}
.back:hover{color:var(--ink)}
.legal{max-width:46rem;padding-bottom:4rem}
.legal h1,.legal h2{font-weight:500;color:var(--ink-strong);text-wrap:balance}
.legal h1{font-size:clamp(2rem,5vw,2.8rem);letter-spacing:-.03em;margin:1rem 0 1.5rem}
.legal h2{font-size:1.15rem;letter-spacing:-.005em;margin:2.25rem 0 .5rem;max-width:none}
.legal p,.legal li{font-size:.98rem}
.legal ul{padding-left:1.2rem}
.legal .updated{font-family:var(--mono);font-size:12px;color:var(--faint)}
/* Right to object: must be presented clearly and separately (Art. 21(4) GDPR) */
.legal .objection{border:2px solid var(--ink);border-radius:12px;padding:0 1.25rem 1rem;margin:2.5rem 0}
.legal .objection h2{margin-top:1.25rem}