:root { --paper:#fffcf5; --red:#8f0d0f; --nav-red:#8e2221; }
@view-transition { navigation:auto; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--red); font-family:"DM Sans",Arial,sans-serif; }
body { min-width:320px; min-height:100vh; margin:0; }
button { color:inherit; font:inherit; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; width:calc(100% - 84px); margin:42px; }
.page-kicker { width:304px; margin:0; color:var(--red); font-size:16px; font-weight:300; line-height:normal; text-transform:uppercase; view-transition-name:site-kicker; }
.page-nav { display:flex; align-items:center; gap:29px; view-transition-name:site-nav; }
.page-nav a,.contact { border:0; padding:0; background:transparent; color:var(--nav-red); font-size:16px; line-height:normal; text-decoration:none; text-transform:uppercase; white-space:nowrap; cursor:pointer; transition:color 180ms ease,transform 180ms ease; }
.page-nav a:hover,.contact:hover { color:#111; transform:translateY(-2px); }
.page-nav a:focus-visible,.contact:focus-visible { outline:2px solid var(--red); outline-offset:5px; }
.contact { display:flex; align-items:center; gap:5px; }
.contact span { width:10px; height:10px; border-radius:1px; background:currentColor; }
::view-transition-old(root) { animation:220ms ease-out both soft-fade-out; mix-blend-mode:normal; }
::view-transition-new(root) { animation:220ms ease-out both soft-fade-in; mix-blend-mode:normal; }
::view-transition-group(site-kicker),
::view-transition-group(site-nav) { animation:none !important; }
::view-transition-old(site-kicker),
::view-transition-old(site-nav) { animation:none !important; opacity:1; mix-blend-mode:normal; }
::view-transition-new(site-kicker),
::view-transition-new(site-nav) { animation:none !important; opacity:0; mix-blend-mode:normal; }
@keyframes soft-fade-out { to { opacity:0; } }
@keyframes soft-fade-in { from { opacity:0; } }
.instructions { width:min(649px,calc(100% - 48px)); margin:111px auto 120px; }
.instructions h1 { display:flex; align-items:center; height:62px; margin:0 0 62px; mix-blend-mode:darken; }
.instructions h1 img { display:block; width:274px; height:auto; }
.steps { display:flex; flex-direction:column; gap:38px; }
.step,.step__copy { display:flex; flex-direction:column; align-items:flex-start; }
.step--with-image { gap:22px; }
.step__copy { gap:8px; width:100%; }
.step__copy--prompt { gap:12px; }
.step__copy h2,.step__copy p { margin:0; font-size:16px; line-height:normal; }
.step__copy h2 { color:var(--red); font-weight:600; text-transform:uppercase; }
.step__copy p { color:rgb(143 13 15 / 80%); font-weight:300; }
.step__copy strong { font-weight:500; }
.midjourney-link { color:inherit; font-weight:500; text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:2px; transition:color 180ms ease; }
.midjourney-link:hover { color:var(--red); }
.instruction-image { position:relative; width:100%; overflow:hidden; }
.instruction-image img { position:absolute; max-width:none; }
.instruction-image--sref { aspect-ratio:647/69; border-radius:11px; }
.instruction-image--sref img { top:-71.01%; left:-1.39%; width:101.39%; height:171.01%; }
.instruction-image--filters { aspect-ratio:454/145; border-radius:6px; }
.instruction-image--filters img { top:-0.02%; left:0; width:100%; height:161.42%; }
.instruction-image--prompt { aspect-ratio:647/118; border-radius:16px; }
.instruction-image--prompt img { top:0; left:-1.39%; width:101.39%; height:100%; }
.custom-cursor { display:none; }
@media (hover:hover) and (pointer:fine) {
  html,body,a,button { cursor:none!important; }
  .custom-cursor { position:fixed; z-index:9999; top:0; left:0; display:block; width:29px; height:29px; border-radius:50%; background:#f8751b; opacity:0; pointer-events:none; mix-blend-mode:difference; transform:translate3d(-50%,-50%,0); transition:width 140ms ease,height 140ms ease,opacity 120ms ease; }
  .custom-cursor.is-visible { opacity:1; }
  .custom-cursor.is-over-interactive { width:38px; height:38px; }
}
@media (max-width:760px) {
  .page-header { flex-wrap:wrap; width:calc(100% - 48px); margin:24px; }
  .page-kicker { width:min(304px,100%); }
  .page-nav { width:100%; justify-content:flex-end; gap:18px; }
  .page-nav a,.contact { font-size:13px; }
  .instructions { margin-top:96px; margin-bottom:80px; }
  .instructions h1 { height:auto; margin-bottom:48px; }
  .instructions h1 img { width:min(274px,75vw); height:auto; }
  .step__copy h2,.step__copy p { font-size:15px; }
}
@media (max-width:430px) {
  .page-nav { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
