/* Shutter wordmark footer (vanilla port of shutter-glyph-footer.tsx).
   Black on black with the About section above it, so the two read as one. */
.sgf {
  --sgf-bg: #000;
  --sgf-ink: #fff;
  --sgf-mono: "JetBrains Mono", "IBM Plex Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; container-type: inline-size;
  color: var(--sgf-ink); background: var(--sgf-bg);
  font-family: var(--sgf-mono); font-size: clamp(11px, 1.12cqw, 13.5px); line-height: 1.18;
  letter-spacing: .015em; text-transform: uppercase; -webkit-font-smoothing: antialiased;
}
.sgf ::selection { background: var(--sgf-ink); color: var(--sgf-bg); }
:where(.sgf) a { color: inherit; text-decoration: none; }
:where(.sgf) button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.sgf) ul { list-style: none; margin: 0; padding: 0; }
:where(.sgf) p { margin: 0; }
.sgf svg { max-width: none; }
.sgf .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sgf-top {
  box-sizing: border-box; display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto;
  column-gap: 24px; row-gap: 36px;
  padding: clamp(64px, 11.5cqw, 150px) clamp(16px, 2.6cqw, 40px) 0;
}
.sgf-fade { transition: opacity .8s ease var(--sgf-d, 0ms), translate .8s cubic-bezier(.2, .7, .1, 1) var(--sgf-d, 0ms); }
.sgf[data-in='false'] .sgf-fade { opacity: 0; translate: 0 10px; }

/* Contact: an underlined field that is a real mailto, plus copy. */
.sgf-form { max-width: 300px; }
.sgf-lede { max-width: 240px; }
.sgf-field {
  position: relative; display: flex; align-items: center;
  margin-top: clamp(18px, 2.2cqw, 26px); padding: 4px 0 5px; border-bottom: 1px solid var(--sgf-ink);
}
.sgf-field::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--sgf-ink);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.sgf-field:hover::after, .sgf-field:focus-within::after { transform: scaleX(1); }
.sgf-mail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.sgf-go { flex: none; display: grid; place-items: center; width: 26px; height: 20px; margin-right: -6px; }
.sgf-go svg { width: 11px; height: 11px; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.sgf-field:hover .sgf-go svg, .sgf-field:focus-within .sgf-go svg { translate: 4px 0; }
.sgf-msg { display: flex; gap: 12px; min-height: 1.2em; margin-top: 8px; font-size: .86em; }
.sgf-copy-btn { opacity: .55; transition: opacity .2s; }
.sgf-copy-btn:hover, .sgf-copy-btn:focus-visible { opacity: 1; outline: none; text-decoration: underline; text-underline-offset: 3px; }
.sgf-note { opacity: .85; }

/* Links: a mono label, an arrow that walks right, an underline that wipes in. */
.sgf-list { display: flex; flex-direction: column; gap: clamp(5px, .6cqw, 7px); }
.sgf-link { position: relative; display: inline-flex; align-items: center; gap: .65em; white-space: nowrap; padding: 1px 0; }
.sgf-link::after {
  content: ''; position: absolute; left: 0; right: 1.6em; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.sgf-link:hover::after, .sgf-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.sgf-link svg { width: .8em; height: .8em; flex: none; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.sgf-link:hover svg, .sgf-link:focus-visible svg { translate: 5px 0; }
.sgf-link:focus-visible { outline: none; }
.sgf-copy { white-space: pre-line; }

/* The wordmark. */
.sgf-mark { box-sizing: border-box; padding: clamp(36px, 4.6cqw, 64px) clamp(16px, 2.6cqw, 40px) clamp(14px, 2.1cqw, 28px); }
.sgf-svg { display: block; width: 100%; height: auto; overflow: hidden; fill: var(--sgf-ink); }
.sgf-rise { transition: transform 1.15s cubic-bezier(.16, .84, .2, 1) var(--sgf-d, 0ms); }
.sgf[data-in='false'] .sgf-rise { transform: translateY(112px); }
.sgf-g, .sgf .sg-sh { cursor: pointer; }
.sgf-flip { transform-box: fill-box; transform-origin: 50% 50%; }
.sgf-flip.is-flip { animation: sgf-flip .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes sgf-flip { 0% { transform: scaleY(1); } 45% { transform: scaleY(-1); } 100% { transform: scaleY(1); } }
.sgf-half, .sg-mark .sgf-half { transition: transform .55s cubic-bezier(.2, .9, .25, 1.15); }
.sgf-g:hover .sgf-up { transform: translate(5px, -1.5px); }
.sgf-g:hover .sgf-dn { transform: translate(-5px, 1.5px); }
/* Ambient wave: each letter slices at its waist in turn (nav and footer). */
.sg-l.is-wave .sgf-up { transform: translate(5px, -1.5px); }
.sg-l.is-wave .sgf-dn { transform: translate(-5px, 1.5px); }
.logo .sg-l.is-wave .sgf-up { transform: translate(11px, -2.5px); }
.logo .sg-l.is-wave .sgf-dn { transform: translate(-11px, 2.5px); }

@container (max-width: 760px) {
  .sgf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sgf-top > :first-child, .sgf-top > .sgf-copy { grid-column: 1 / -1; }
  .sgf-copy { order: 3; }
  .sgf-form { max-width: 360px; }
}
@container (max-width: 420px) { .sgf-top { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sgf .sgf-rise, .sgf .sgf-fade, .sgf .sgf-half, .sgf .sgf-link svg, .sgf .sgf-link::after, .sgf .sgf-field::after, .sgf .sgf-go svg { transition: none !important; }
  .sgf .sgf-flip { animation: none !important; }
  .sg-mark .sgf-half { transition: none !important; }
  .sgf[data-in='false'] .sgf-rise { transform: none; }
  .sgf[data-in='false'] .sgf-fade { opacity: 1; translate: none; }
}

/* Nav logo: the same mark, small, in currentColor so the nav's difference blend keeps working. */
.logo .sg-mark { display: block; height: 26px; width: auto; fill: currentColor; overflow: visible; }
@media (max-width: 820px) { .logo .sg-mark { height: 22px; } }

/* Phones: mono text up a step so it stays readable, and the email row is a full-size tap target. */
@media (max-width: 820px) {
  .sgf { font-size: 12.5px; }
  .sgf-msg { font-size: 11px; }
  .sgf-mail { padding: 10px 0; }
}