/* still sound design — the page around the code blocks.
   Rebuilt from the Squarespace template and custom CSS of still.productions
   (values measured on the live site, October 2026). The code blocks bring
   their own styles, unchanged. */

:root {
  --font-button: "Still Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; background: #fcfcfc; }

/* the paper is still-ground.css, under the page */
body {
  margin: 0;
  color: #414141;
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  font-size: 15px;
  line-height: 1.8em;
  position: relative;
}

body, button, input, select, textarea { color: #414141; }
input, textarea, select, button { font-family: var(--font); }

a, a:visited { color: #111; text-decoration: none; }
a:hover { color: #444; }
a:focus { outline: none; }

/* custom CSS: everything lowercase, except on wie and studio */
h1, h2, h3, h4, h5, h6, p, span, a, li, div { text-transform: lowercase !important; }
body.page-about h1, body.page-about h2, body.page-about h3, body.page-about h4, body.page-about h5, body.page-about h6,
body.page-about p, body.page-about span, body.page-about a, body.page-about li, body.page-about div,
body.page-studio h1, body.page-studio h2, body.page-studio h3, body.page-studio h4, body.page-studio h5, body.page-studio h6,
body.page-studio p, body.page-studio span, body.page-studio a, body.page-studio li, body.page-studio div { text-transform: none !important; }

h1, h2, h3, h4, h5, h6 { margin: 1em 0 .5em; }
h1 { font-weight: 900; line-height: 1.5em; font-size: 2em; letter-spacing: .06em; color: #222; }
h2 { font-weight: 900; line-height: 1.2em; font-size: 1.6em; letter-spacing: .06em; color: #222; }
h3 { font-weight: 500; line-height: 1.2em; font-size: 1.3em; letter-spacing: .06em; color: #9d9d9d; }
p { line-height: 1.8em; font-size: 15px; margin: 0 0 1em; }
b, strong { font-weight: bold; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* ===== canvas ===== */
#canvas {
  max-width: 1200px;
  margin: 10px auto;
  padding: 75px;
  background-color: rgba(255,255,255,0);
}

#header { margin-bottom: 40px; }
#header::after, #page::after, #footer::after, .sqs-row::after, .fields::after { content: ""; display: table; clear: both; }

#logo { float: left; }
#logo h1.logo {
  margin: 0;
  display: inline-block;
  font-weight: 900;
  font-style: normal;
  font-size: 42px;
  line-height: 1.2em;
  letter-spacing: 1px;
}
#logo h1.logo a, #logo h1.logo a:visited { color: #222; }
#logo h1.logo a:hover { color: #444; }

#topNav { float: right; position: relative; z-index: 890; }
#topNav, #topNav nav, #topNav ul, #topNav li, #topNav a {
  font-weight: 700;
  font-style: normal;
  line-height: 1.6em;
  font-size: 13px;
  letter-spacing: 1.25px;
}
#topNav nav ul { list-style: none; margin: 0; padding: 0; }
#topNav nav li { float: left; position: relative; margin-right: 30px; }
#topNav nav li:last-child { margin-right: 0; }
#topNav nav li a { display: inline-block; line-height: 26px; padding: 12.2px 0; }
#topNav a, #topNav a:visited { color: #737373; }
#topNav .active-link > a, #topNav a:hover { color: #111; }

#mobileMenuLink { display: none; }
#mobileNav { height: 0; overflow: hidden; transition: height .3s ease; }

#page { padding: 50px 0; position: relative; }
.page-header { }

#footer { margin-top: 50px; }
#footerBlock { min-height: 34px; width: 50%; float: left; }

/* ===== the 12-column grid ===== */
.sqs-row { margin: 0 -17px; }
.sqs-col .sqs-row { margin: 0; }
.sqs-col { float: left; box-sizing: border-box; }
.span-12 { width: 100%; }
.span-6 { width: 50%; }
.sqs-block { position: relative; padding: 17px; clear: both; }
.sqs-block.pad-x { padding: 0 17px; }
.sqs-block.pad-x-b { padding: 0 17px 17px; }
.sqs-block-html > *:first-child, .sqs-html-content > *:first-child { margin-top: 0; }
.sqs-block-html > *:last-child, .sqs-html-content > *:last-child { margin-bottom: 0; }
.page-title-block { margin-top: 50px; padding: 0 17px; }

/* ===== phones (the template switches at 750px, the grid at 640px) ===== */
@media only screen and (max-width: 750px) {
  #canvas { margin: 0 auto; padding: 0 20px 20px; }
  #header { margin-bottom: 30px; }
  #logo { float: none; }
  #logo h1.logo { display: block; text-align: center; letter-spacing: normal; }
  #header #topNav { display: none; }

  #mobileNav { margin: 0 0 15px; }
  #mobileNav .wrapper { padding: 0 0 1em; border-bottom: 1px solid #ddd; }
  #mobileNav ul { list-style: none; margin: 0; padding: 0; }
  #mobileNav li { display: block; text-align: center; }
  #mobileNav a, #mobileNav a:visited {
    display: block;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1.25px;
    color: rgba(153,153,153,.7);
    font-size: 16px;
    line-height: 2.5em;
  }
  #mobileNav .active-link a { color: #999; }

  #mobileMenuLink {
    display: block;
    margin: 0 0 25px;
    padding: 0 0 15px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.6em;
    letter-spacing: 1.25px;
  }
  #mobileMenuLink a { cursor: pointer; display: block; margin: 0; font-size: 16px !important; color: #737373; }
}

@media only screen and (max-width: 640px) {
  .sqs-col { float: none; width: 100%; }
  .sqs-block.pad-x, .sqs-block.pad-x-b { padding: 17px; }
}

/* ===== phones: the title on the same spot as on the film site, the menu beside it ===== */
@media only screen and (max-width: 750px) {
  #canvas { position: relative; padding-top: 20px; }
  #logo h1.logo { font-size: 30px; text-align: left; letter-spacing: 1px; }
}

/* from 900 down there is no room for the menu beside the title: it lies behind
   one word, on the title's line, with its list under it; nothing moves */
@media only screen and (max-width: 900px) {
  #canvas { position: relative; }
  #header #topNav { display: none; }
  #mobileMenuLink {
    display: block; position: absolute; z-index: 2; top: 75px; right: 75px; margin: 0; padding: 0;
    font-weight: 700; font-size: 16px; letter-spacing: 1.25px; line-height: 50.4px;
  }
  /* the ink stands on the clouds and on pictures here: #737373 went under in them */
  #mobileMenuLink a { display: block; margin: 0; font-size: 16px !important; color: #444; cursor: pointer; }
  #mobileNav { position: absolute; z-index: 2; top: 125.4px; right: 75px; margin: 0; }
  #mobileNav .wrapper { padding: 4px 0 8px; border: 0; }
  html.is-menu-open #mobileNav li { animation: still-menu-in .35s ease both; }
  html.is-menu-open #mobileNav li:nth-child(2) { animation-delay: .04s; }
  html.is-menu-open #mobileNav li:nth-child(3) { animation-delay: .08s; }
  html.is-menu-open #mobileNav li:nth-child(4) { animation-delay: .12s; }
  #mobileNav ul { list-style: none; margin: 0; padding: 0; }
  #mobileNav li { display: block; text-align: right; }
  #mobileNav a, #mobileNav a:visited { display: block; text-align: right; font-weight: 700; letter-spacing: 1.25px; color: #333; font-size: 22px; line-height: 2; }
  #mobileNav .active-link a { color: var(--m-menu-on); }
}
@media only screen and (max-width: 750px) {
  #mobileMenuLink { top: 20px; right: 20px; line-height: 36px; }
  #mobileNav { top: 56px; right: 20px; }
}

/* ===== the endless page has no top to go back to: the title and the menu stay
   at hand, on the same spot as ever, and step aside while you read down, as on film ===== */
html.is-looping #canvas { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
html.is-looping #header {
  position: fixed; z-index: 20; margin: 0;
  top: 85px; left: max(75px, calc(50% - 600px)); right: max(75px, calc(50% - 600px));
}
/* the title's line runs the whole width here: the menu lies over it, and over the pictures */
html.is-looping #mobileMenuLink, html.is-looping #mobileNav { z-index: 21; }
html.is-looping #page { padding: 225.41px 0 0; }
html.is-looping #footer { display: none; }
html.is-looping #header, html.is-looping #mobileMenuLink { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
html.is-looping #canvas.is-tucked #header, html.is-looping #canvas.is-tucked #mobileMenuLink { transform: translateY(-200px); opacity: 0; }
html.is-looping #canvas.is-tucked:focus-within #header, html.is-looping #canvas.is-tucked:focus-within #mobileMenuLink { transform: none; opacity: 1; }
@media only screen and (max-width: 900px) {
  html.is-looping #mobileMenuLink { position: fixed; top: 85px; }
  html.is-looping #mobileNav { position: fixed; top: 135.4px; }
}
@media only screen and (max-width: 750px) {
  html.is-looping #header { top: 20px; left: 20px; right: 20px; }
  html.is-looping #mobileMenuLink { top: 20px; }
  html.is-looping #mobileNav { top: 56px; }
  html.is-looping #page { padding-top: calc(20px + 36px + 80px); }
  html.is-looping #canvas.is-tucked #header, html.is-looping #canvas.is-tucked #mobileMenuLink { transform: translateY(-100px); }
}
@media only screen and (max-width: 350px) { #logo h1.logo { font-size: 26px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== page change: the content goes out drifting up, the new one comes in
   from just below; logo, menu, footer and grain stay (sound-site.js) ===== */
#page { transition: opacity .38s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .38s ease; }
html.is-leaving:not(.is-mirroring) #page { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
html.is-entering:not(.is-mirroring) #page { opacity: 0; transform: translateY(10px); filter: blur(3px); transition: none; }
@media (prefers-reduced-motion: reduce) { html.is-leaving #page, html.is-entering #page { transform: none !important; filter: none !important; } }
/* Safari has to redraw a whole page for this blur: there it only fades and drifts */
html.is-webkit.is-leaving #page, html.is-webkit.is-entering #page { filter: none; }

/* between the sites and the choice the rest goes and comes too, the title
   first; with the title handed over from the other site it is simply there */
#logo, #topNav, #mobileMenuLink, #footer { transition: opacity .45s ease; }
html.is-crossing.is-leaving #logo, html.is-crossing.is-leaving #topNav, html.is-crossing.is-leaving #mobileMenuLink,
html.is-crossing.is-leaving #footer { opacity: 0; }
html.is-crossing.is-entering #footer, html.is-crossing.is-entering:not(.keep-title) #topNav, html.is-crossing.is-entering:not(.keep-title) #mobileMenuLink,
html.is-crossing.is-entering:not(.keep-title) #logo { opacity: 0; transition: none; }
html.is-crossing #page { transition-duration: 1s, 1.3s, 1s; transition-delay: .25s; }
html.is-crossing #logo { transition-duration: .9s; }
html.is-crossing #topNav, html.is-crossing #mobileMenuLink, html.is-crossing #footer { transition-duration: 1s; transition-delay: .12s; }
html.is-crossing.is-leaving #page { transition-duration: .42s; transition-delay: 0s; }
html.is-crossing.is-leaving #topNav, html.is-crossing.is-leaving #mobileMenuLink, html.is-crossing.is-leaving #footer { transition-duration: .42s; transition-delay: 0s; }
html.title-lifted #logo, html.title-lifted .still-menu { visibility: hidden; }

/* near the logo the other side of still appears under it */
#logo { position: relative; }
#logo h1.logo { position: relative; }
#logo::before { content: ""; position: absolute; inset: -16px -40px -56px -40px; }
@media (hover: none) { #logo::before { display: none; } }   /* the mouse's way down to it; a finger only finds it in the way */
#logo .still-switch { color: #222; }
#logo:hover .still-switch, #logo .still-switch:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
#logo .still-switch:hover { color: #555; }