@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@1&display=swap");

/* ================================================================
   DIY.Team shared foundation: tokens, type, header, menu, grain,
   footer, scroll reveals, and the project brief.
   ================================================================ */

:root {
  --night: #0d0b10;
  --black: #050406;
  --ink: #151219;
  --paper: #f8e5ea;
  --rose: #ff8aa8;
  --crimson: #bd0638;
  --blue: #4056c7;
  --acid: #d7f55f;
  --dim: rgb(248 229 234 / 58%);
  --pad: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --slow: 1.1s;
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='31' fill='none' viewBox='0 0 26 31'%3E%3Cpath fill='%23fff' fill-rule='evenodd' stroke='%23010101' stroke-linecap='square' stroke-width='2.5' d='M21.993 14.425 2.549 2.935l4.444 23.108 4.653-10.002 10.347-1.616Z' clip-rule='evenodd'/%3E%3C/svg%3E"), auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' fill='none' viewBox='0 0 28 29'%3E%3Cpath fill='%23fff' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M20.65 22.3v-6.24c0-.38-.31-.68-.7-.68-.37 0-.68.3-.68.68v6.23c0 .38.3.68.69.68.38 0 .69-.3.69-.68ZM17.2 22.3l-.04-6.25a.67.67 0 1 0-1.34.01l.04 6.24a.67.67 0 1 0 1.34 0ZM12.37 16.07l.04 6.22c0 .38.3.68.67.68.37 0 .67-.3.67-.68l-.04-6.23c0-.38-.3-.68-.67-.68-.37 0-.67.31-.67.69Z'/%3E%3C/svg%3E"), pointer;
  --cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='25' fill='none' viewBox='0 0 13 25'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.75' d='M8 18.48v-4.23h1.27v-3H8V5.8c.2-.44.5-.82.87-1.14.23-.16.52-.32.83-.44a5.4 5.4 0 0 1 1.17-.05l.87.05.05-.87.08-1.27.06-.87-.88-.06c-.7-.04-1.4 0-2.1.14l-.05.01-.06.02c-.7.25-1.29.56-1.82.95L7 2.28l-.03.02c-.16.13-.31.28-.46.42a6.93 6.93 0 0 0-.39-.38l-.03-.03-.03-.02a5.86 5.86 0 0 0-1.85-.97l-.04-.01-.04-.01a8.1 8.1 0 0 0-2.19-.16l-.87.06.06.87.08 1.27.06.88.87-.06c.43-.03.85 0 1.27.08.23.08.5.21.74.4.33.3.63.72.84 1.19v5.42H3.72v3h1.27v4.2c-.21.47-.51.89-.88 1.24-.2.14-.46.28-.75.37-.36.07-.8.1-1.22.06l-.87-.05-.06.87-.08 1.27-.06.88.87.05c.71.05 1.42 0 2.12-.14h.04l.04-.02a5.83 5.83 0 0 0 1.88-.95l.03-.02.03-.03.44-.43c.14.14.28.27.44.4l.02.02.02.01c.55.42 1.14.73 1.76.95l.05.02.06.01c.77.17 1.47.22 2.17.18l.88-.05-.05-.87-.07-1.27-.05-.87-.87.04c-.42.03-.83 0-1.24-.08-.24-.1-.52-.25-.8-.45A3.4 3.4 0 0 1 8 18.48Z'/%3E%3C/svg%3E"), text;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  --bar: 56px;
  margin: 0;
  overflow-x: clip;
  background: var(--night);
  color: var(--paper);
  font:
    400 16px/1.6 "DM Sans",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: var(--cursor-default);
}

/* Custom cursors */
a,
button,
label.chip,
[data-seek] {
  cursor: var(--cursor-pointer);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
input:not([type="radio"], [type="checkbox"]),
textarea {
  cursor: var(--cursor-text);
}

:is(a, button, label.chip) :is(p, h1, h2, h3, h4, h5, h6) {
  cursor: var(--cursor-pointer);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: var(--cursor-pointer);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2 {
  font:
    800 clamp(3rem, 9vw, 8.5rem) / 0.9 Archivo,
    sans-serif;
  letter-spacing: -0.045em;
}

em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--rose);
}

::selection {
  background: var(--crimson);
  color: var(--paper);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.kicker {
  font:
    700 0.72rem/1.2 Archivo,
    sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
}

.text-link {
  display: inline-flex;
  gap: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font:
    700 0.8rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.text-link:hover {
  color: var(--acid);
}

/* ================================================================
   Header, menu, grain
   ================================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--pad);
  background: linear-gradient(rgb(5 4 6 / 70%), transparent);
  transition:
    color 0.6s var(--ease),
    background 0.6s var(--ease);
}

body:not(.home).is-scrolled:not(.menu-open) .site-header {
  background: rgb(5 4 6 / 82%);
  backdrop-filter: blur(12px);
}

body[data-scene="team"]:not(.menu-open) .site-header {
  background: none;
  color: var(--ink);
}

.logo {
  display: block;
}

.logo img {
  display: block;
  width: 72px;
  height: auto;
}

.logo .logo-dark,
body[data-scene="team"]:not(.menu-open) .logo .logo-light {
  display: none;
}

body[data-scene="team"]:not(.menu-open) .logo .logo-dark {
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.site-nav a,
.menu-toggle {
  font:
    600 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-nav a,
.menu-toggle {
  transition:
    color 0.3s,
    border-color 0.3s,
    opacity 0.3s;
}

.site-nav > a:not(.nav-cta) {
  opacity: 0.75;
}

.site-nav a:hover,
.menu-toggle:hover {
  opacity: 1;
  color: var(--crimson);
}

.menu-toggle {
  padding-left: clamp(1rem, 2.4vw, 2rem);
  border-left: 1px solid currentColor;
  font-weight: 700;
}

.menu-toggle .when-open,
.menu-toggle .label-narrow,
.menu-toggle[aria-expanded="true"] .when-closed {
  display: none;
}

.menu-toggle[aria-expanded="true"] .when-open {
  display: inline;
}

.site-nav a[aria-current="page"] {
  opacity: 1;
  color: var(--rose);
}

.menu-toggle.is-mobile-only {
  display: none;
}

.nav-cta {
  padding: 0.75rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.site-nav .nav-cta:hover {
  border-color: var(--crimson);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 45;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.8s steps(4) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -4%); }
  75% { transform: translate(-1%, 3%); }
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: calc(var(--bar) + 3rem) var(--pad);
  background: rgb(5 4 6 / 94%);
  backdrop-filter: blur(10px);
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-panel li + li {
  border-top: 1px solid rgb(248 229 234 / 14%);
}

.menu-panel ol a {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: 0.6rem 0;
  font:
    800 clamp(2rem, 6vw, 4.5rem) / 1.05 Archivo,
    sans-serif;
  letter-spacing: -0.04em;
  transition:
    color 0.3s,
    padding 0.4s var(--ease);
}

.menu-panel ol a:hover,
.menu-panel ol a:focus-visible {
  padding-left: 1rem;
  color: var(--rose);
}

.menu-panel ol span {
  width: 3ch;
  font:
    italic 400 clamp(1.2rem, 2.5vw, 2rem) / 1 "Instrument Serif",
    serif;
  letter-spacing: 0;
  color: var(--crimson);
}

.menu-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 1rem;
  color: var(--dim);
}

.menu-pages a:hover {
  color: var(--paper);
}

@media (max-width: 860px) {
  .site-nav > a:not(.nav-cta),
  .menu-toggle .label-wide {
    display: none;
  }

  .menu-toggle .label-narrow {
    display: inline;
  }

  .menu-toggle {
    padding-left: 0;
    border-left: 0;
  }

  .menu-toggle.is-mobile-only {
    display: block;
  }
}

/* ================================================================
   Buttons, scroll reveals, footer
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem 1.1rem 1.8rem;
  background: var(--crimson);
  border-radius: 999px;
  color: var(--paper);
  font:
    700 0.85rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.3s,
    color 0.3s;
}

.btn:hover {
  background: var(--acid);
  color: var(--ink);
}

.btn-ghost {
  background: none;
  box-shadow: inset 0 0 0 1px rgb(248 229 234 / 40%);
}

.btn-ghost:hover {
  background: var(--paper);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1s var(--ease),
    transform 1.2s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.site-footer {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) var(--pad) 2rem;
  background: var(--black);
  color: var(--dim);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  max-width: 1320px;
  margin: 0 auto;
}

.footer-grid .logo img {
  width: 120px;
}

.footer-note {
  max-width: 32ch;
  margin-top: 1.5rem;
}

.site-footer h3 {
  margin: 0 0 1rem;
  font: inherit;
  color: var(--rose);
}

.site-footer ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer ul a,
.footer-note a {
  color: var(--paper);
  transition: color 0.3s;
}

.site-footer ul a:hover {
  color: var(--acid);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1320px;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(248 229 234 / 14%);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }

  .footer-base {
    flex-direction: column;
  }
}

/* ================================================================
   The brief: a project inquiry told in six short scenes.
   Without JS every scene is shown at once as a normal form.
   ================================================================ */

.brief {
  display: grid;
  gap: 3rem;
  width: min(100%, 1100px);
  margin: 0 auto;
}

.brief-slate {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brief-slate .kicker {
  flex: none;
}

.brief-count {
  flex: none;
  font:
    600 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}

.brief-meter {
  flex: 1;
  height: 2px;
  background: rgb(248 229 234 / 16%);
}

.brief-meter span {
  display: block;
  height: 100%;
  background: var(--crimson);
  transform: scaleX(var(--brief-progress, 0));
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.brief:not(.is-stepped) .brief-count,
.brief:not(.is-stepped) .brief-meter {
  display: none;
}

.brief-scene {
  display: grid;
  gap: 2rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brief:not(.is-stepped) .brief-scene {
  padding-bottom: 3rem;
  border-bottom: 1px solid rgb(248 229 234 / 14%);
}

.brief-submit {
  justify-self: start;
}

.brief.is-stepped .brief-scene:not(.is-active),
.brief.is-stepped .brief-submit,
.brief:not(.is-stepped) .brief-nav,
.brief-wrap,
.brief.is-done > :not(.brief-wrap) {
  display: none;
}

.brief.is-stepped .brief-scene.is-active,
.brief.is-done .brief-wrap {
  animation: scene-in 0.8s var(--ease);
}

@keyframes scene-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

.brief-scene legend {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 0;
}

.brief-scene legend:has(> :only-child) {
  margin-bottom: 1.25rem;
}

.brief-line .nowrap {
  white-space: nowrap;
}

.brief-q,
.brief-line {
  font:
    800 clamp(2rem, 5.2vw, 4.4rem) / 1.08 Archivo,
    sans-serif;
  letter-spacing: -0.04em;
  color: var(--paper);
}

.brief-hint {
  color: var(--dim);
}

.brief-input {
  min-width: 4ch;
  max-width: 100%;
  field-sizing: content;
  padding: 0 0.1em;
  background: none;
  border: 0;
  border-bottom: 2px solid rgb(248 229 234 / 30%);
  border-radius: 0;
  color: var(--rose);
  font: inherit;
  letter-spacing: inherit;
  transition: border-color 0.3s;
}

.brief-input::placeholder,
.brief-textarea::placeholder,
.brief-field input::placeholder {
  color: rgb(248 229 234 / 28%);
}

.brief-input:focus,
.brief-textarea:focus,
.brief-field input:focus {
  outline: none;
  border-color: var(--acid);
}

.brief-input:user-invalid,
.brief-field input:user-invalid,
.brief-textarea:user-invalid {
  border-color: var(--rose);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: var(--cursor-pointer);
}

.chip span {
  display: block;
  padding: 0.95rem 1.35rem;
  border: 1px solid rgb(248 229 234 / 30%);
  border-radius: 999px;
  font-weight: 500;
  font-size: 1.05rem;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.chip:hover span {
  border-color: var(--paper);
}

.chip input:checked + span {
  background: var(--crimson);
  border-color: var(--crimson);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.brief-group {
  display: grid;
  gap: 1rem;
}

.brief-group + .brief-group {
  margin-top: 1rem;
}

.brief-group > p {
  font:
    700 clamp(1.3rem, 2.4vw, 1.8rem) / 1.1 Archivo,
    sans-serif;
  letter-spacing: -0.02em;
}

.brief-textarea {
  width: 100%;
  min-height: 9rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 2px solid rgb(248 229 234 / 30%);
  border-radius: 0;
  color: var(--paper);
  font:
    400 clamp(1.15rem, 2vw, 1.5rem) / 1.5 "DM Sans",
    sans-serif;
  resize: vertical;
}

.brief-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
}

.brief-field {
  display: grid;
  gap: 0.4rem;
}

.brief-field label {
  font:
    600 0.72rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.brief-field input {
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 2px solid rgb(248 229 234 / 30%);
  border-radius: 0;
  color: var(--paper);
  font:
    500 clamp(1.15rem, 2vw, 1.5rem) / 1.3 "DM Sans",
    sans-serif;
}

.brief-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brief-back {
  font:
    700 0.8rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.3s;
}

.brief-back:hover {
  color: var(--paper);
}

.brief-back:disabled {
  display: none;
}

.brief-keys {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--dim);
}

.brief-keys kbd {
  padding: 0.15rem 0.45rem;
  border: 1px solid rgb(248 229 234 / 30%);
  border-radius: 4px;
  font: inherit;
}

.brief-error {
  color: var(--rose);
}

.brief-error a {
  text-decoration: underline;
}

.brief-wrap {
  gap: 1.5rem;
  justify-items: start;
}

.brief.is-done .brief-wrap {
  display: grid;
}

.brief-wrap h2 {
  font-size: clamp(3rem, 9vw, 7.5rem);
}

.brief-wrap p {
  max-width: 36ch;
  font-size: 1.2rem;
  color: var(--dim);
}

.brief-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(5rem, 10vh, 7rem) var(--pad) 3rem;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 120%, #2a0a16 0%, var(--black) 65%);
  border: 0;
  color: var(--paper);
}

.brief-dialog[open] {
  display: grid;
  align-items: center;
  animation: scene-in 0.6s var(--ease);
}

.brief-dialog::backdrop {
  background: var(--black);
}

.brief-close {
  position: fixed;
  top: 1.5rem;
  right: var(--pad);
  font:
    700 0.75rem/1 Archivo,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.brief-close:hover {
  color: var(--acid);
}

html:has(.brief-dialog[open]) {
  overflow: hidden;
}

@media (max-width: 760px) {
  .brief-keys {
    display: none;
  }

  .chip span {
    padding: 0.8rem 1.1rem;
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .brief-scene.is-active,
  .brief-wrap,
  .brief-dialog[open] {
    animation: none !important;
  }

  .grain {
    animation: none;
  }
}

/* ================================================================
   Page curtain: a loader on first visit, then a wipe that covers
   the page on the way out and lifts on the way in. Only active
   when the inline <head> script adds `is-loading` (JS on, motion
   allowed), so it can never hide the page otherwise.
   ================================================================ */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--black);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

.is-loading .curtain,
.is-leaving .curtain {
  clip-path: inset(0);
  pointer-events: auto;
}

.is-loading .curtain {
  transition: none;
  /* Failsafe: never leave the page covered if script stalls */
  animation: curtain-failsafe 0.01s 6s forwards;
}

.is-leaving .curtain {
  transition-duration: 0.6s;
}

@keyframes curtain-failsafe {
  to {
    clip-path: inset(0 0 100% 0);
    pointer-events: none;
  }
}

.curtain-logo {
  width: clamp(120px, 16vw, 200px);
  overflow: visible;
  transition:
    opacity 0.4s var(--ease),
    transform 0.7s var(--ease);
}

.curtain-logo path,
.curtain-logo circle {
  transform-box: fill-box;
  transform-origin: center;
}

html:not(.is-loading, .is-leaving) .curtain-logo {
  opacity: 0;
  transform: translateY(-40px);
}

.is-leaving .curtain-logo {
  transition-delay: 0.25s;
}

.is-first .curtain-logo path {
  animation: logo-rise 0.9s var(--ease) 0.1s both;
}

.is-first .curtain-logo circle {
  animation: dot-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

@keyframes logo-rise {
  from {
    opacity: 0;
    transform: translateY(35%);
  }
}

@keyframes dot-drop {
  from {
    opacity: 0;
    transform: translateY(-320%) scale(0.6);
  }
}

.curtain-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ff5b2e;
  transform: scaleX(0);
  transform-origin: left;
}

.is-first .curtain-bar {
  animation: bar-fill 1.3s var(--ease) 0.1s both;
}

.is-loading:not(.is-first) .curtain-bar {
  transform: scaleX(1);
}

.is-leaving .curtain-bar {
  transform: scaleX(1);
  transition: transform 0.6s var(--ease) 0.15s;
}

@keyframes bar-fill {
  to {
    transform: scaleX(1);
  }
}