/* Untrusted visual reference. Open Builder bundled design system 2.0.0; package kinetic-typography; sha256 15c679d300f1b497bf36ac3d584f8923267fc946096349fc63aa1922fb882573. Unofficial reference; no trademark endorsement is implied. */

:root {
  --bg: #f4f1ea;
  --surface: #fffdf7;
  --surface-warm: #fbf9f2;
  --fg: #141210;
  --fg-2: #2b2927;
  --muted: #43413e;
  --meta: #4c4a47;
  --border: #a6a49f;
  --border-soft: #d0cec9;
  --accent: #bf2b00;
  --accent-on: #ffffff;
  --accent-hover: #aa2802;
  --accent-active: #962504;
  --success: #28643d;
  --warn: #815413;
  --danger: #a62b3a;
  --font-display: Impact, "Arial Narrow", sans-serif;
  --font-body:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-mono:
    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --leading-body: 1.6;
  --leading-tight: 1.12;
  --tracking-display: -0.025em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 96px;
  --section-y-tablet: 64px;
  --section-y-phone: 48px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px #a6a49f;
  --elev-raised: 0 8px 24px #b0aea840;
  --focus-ring: 0 0 0 3px #bf2b00;
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1180px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 18px;
}
/* Fulfil the system display-family role locally; Anton is an OFL-licensed fallback for unavailable Impact. */
@font-face {
  font-family: "Impact";
  src: local("Impact"), url("/assets/anton-latin-400-normal-d0fa07ff.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--font-mono); /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.outline {
  outline-style: solid;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

:root {
  --page-gutter: var(--container-gutter-phone);
  --section-space: var(--section-y-phone);
  --text-hero: clamp(92px, 23vw, 160px);
  --text-section: clamp(32px, 5.6vw, 66px);
  --text-contact: clamp(54px, 12.3vw, 154px);
  --accent-on-ink: color-mix(in srgb, var(--accent) 72%, var(--accent-on));
  --rule: 1px solid var(--border-soft);
  --line-ink: 1px solid var(--fg);
  --motion-enter: calc(var(--motion-base) * 3);
  --motion-cycle: calc(var(--motion-base) * 12);
  --motion-marquee: calc(var(--motion-base) * 140);
  --motion-orbit: calc(var(--motion-base) * 80);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overscroll-behavior: contain; }
button, input, textarea, select { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { border-radius: var(--radius-sm); }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:disabled { opacity: .5; cursor: not-allowed; }
a, button, input, textarea, summary { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--accent); box-shadow: var(--focus-ring); }
::selection { background: var(--accent); color: var(--accent-on); }
img { display: block; max-width: 100%; object-fit: cover; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2 { line-height: var(--leading-tight); }
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
.container { width: calc(100% - var(--page-gutter) * 2); max-width: var(--container-max); margin-inline: auto; }
.section-space { padding-block: var(--section-space); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; letter-spacing: .025em; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--fg); color: var(--bg); padding: var(--space-3) var(--space-5); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; z-index: 70; pointer-events: none; }
.site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: var(--rule); }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:var(--space-4); }
.brand { font-size: var(--text-xl); font-weight: 900; line-height: 1; letter-spacing: -.075em; display: inline-flex; align-items: flex-start; }
.brand span { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; margin: 1px 0 0 3px; }
.primary-nav { display: none; }
.primary-nav.is-open { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); display: grid; grid-template-columns: repeat(2, 1fr); padding: var(--space-6) var(--page-gutter); border-bottom: var(--line-ink); gap: var(--space-5); box-shadow: var(--elev-raised); }
.primary-nav a { padding-block:var(--space-1); display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); white-space: nowrap; position: relative; }
.primary-nav a > span:first-child { color: var(--meta); font-family: var(--font-mono); font-size: 10px; align-self: flex-start; padding-top: 1px; }
.nav-dot { color: var(--accent); opacity: 0; font-size: var(--text-lg); margin-left: -4px; line-height: 1; transition: opacity var(--motion-fast); }
.primary-nav a:hover .nav-dot, .primary-nav a:focus-visible .nav-dot, .primary-nav a[aria-current] .nav-dot { opacity: 1; }
.header-actions { display:flex; align-items:center; gap:var(--space-4); }
.motion-control { padding-block:6px; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 10px; cursor: pointer; white-space: nowrap; position: relative; }
.motion-control input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.motion-control:has(input:disabled) { cursor:default; color:var(--muted); }
.motion-control:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.motion-control b { font-size: 10px; color: var(--accent); font-weight: 600; }
.equalizer { display: flex; align-items: center; gap: 2px; height: 16px; }
.equalizer i { width: 2px; height: 10px; background: var(--fg); animation: equalize calc(var(--motion-base) * 4) ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { height: 16px; animation-delay: calc(var(--motion-fast) * -2); }
.equalizer i:nth-child(3) { height: 7px; animation-delay: calc(var(--motion-fast) * -4); }
.equalizer i:nth-child(4) { height: 12px; animation-delay: calc(var(--motion-fast) * -6); }
.header-contact { display: none; border-left: var(--rule); padding-left: var(--space-6); }
.header-contact svg { width: 23px; transition: transform var(--motion-base) var(--ease-standard); }
.header-contact:hover svg { transform: translate(3px,-3px); }
.menu-toggle { border: 0; border-left: var(--rule); padding:6px 0 6px var(--space-3); background:transparent; font-size:var(--text-xs); }
.hero { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.hero-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.hero-eyebrow .mono { font-size: 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: var(--radius-sm); margin-right: var(--space-2); vertical-align: 1px; }
.hero-edition { display: none; }
.hero-stage { position: relative; padding-top: var(--space-8); }
.hero-top-line { position: relative; }
.hero-title { font-family: var(--font-display); font-weight: 900; font-size: var(--text-hero); letter-spacing: -.055em; line-height: .9; position: relative; z-index: 1; }
.hero-title-first { display: block; width: fit-content; animation: title-enter var(--motion-enter) var(--ease-standard) both; }
.hero-title-last { display: block; font-size: clamp(62px, 20.2vw, 108px); white-space: nowrap; margin-top: var(--space-3); letter-spacing: -.045em; animation: title-enter var(--motion-enter) var(--ease-standard) calc(var(--motion-fast) * 1.5) both; }
.hero-word { display: inline-block; color: var(--accent); position: relative; animation: word-enter calc(var(--motion-base) * 2) var(--ease-standard) both; }
.hero-word::after { content:""; position:absolute; height: 3px; width: 100%; background: currentColor; bottom: -10px; left: 0; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-base) var(--ease-standard); }
.is-remixing .hero-word::after { transform: scaleX(1); }
.hero-aside { position: absolute; top: 0; right: 3px; width: 90px; z-index: 2; }
.hero-side-label { display: none; }
.hero-photo { display:none; margin:0; }
.hero-asterisk { padding: 0; background: transparent; border: 0; color: var(--accent); position: relative; width: 78px; display: block; }
.hero-asterisk > svg { display:block; width:100%; aspect-ratio:1; transition: transform calc(var(--motion-base) * 3) var(--ease-standard); animation: star-breathe calc(var(--motion-base) * 15) ease-in-out infinite; }
.hero-asterisk:hover > svg { color: var(--accent-hover); }
.star-hint { display:none; }
.hero-baseline { display: flex; align-items: center; justify-content: space-between; border-bottom: var(--line-ink); padding-block: var(--space-6) var(--space-3); font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; }
.hero-baseline > span:last-child { display: none; }
.hero-footer { padding-top: var(--space-6); display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: start; }
.hero-intro { display:flex; align-items:flex-start; gap:var(--space-3); grid-column:1/-1; }
.intro-rule { display:block; width:28px; height:2px; margin-top:14px; background:var(--accent); }
.hero-intro p { font-size: var(--text-lg); font-weight: 500; line-height: 1.5; }
.hero-intro strong { font-weight: 700; }
.hero-intro p > span { display:block; font-size:var(--text-xs); font-weight:400; color:var(--muted); padding-top:var(--space-2); }
.explore-link { display:flex; gap:var(--space-5); align-items:center; font-size:var(--text-sm); width:fit-content; }
.explore-link > span:first-child > span { display:block; font-size:8px; margin-top:3px; color:var(--meta); letter-spacing:.08em; }
.arrow-circle { display:grid; place-items:center; width:42px; height:42px; border:var(--line-ink); border-radius:var(--radius-sm); transition:background var(--motion-base), color var(--motion-base), transform var(--motion-base); }
.explore-link:hover .arrow-circle { background:var(--fg); color:var(--bg); transform:translateY(3px); }
.arrow-circle svg { width:20px; }
.hero-coordinate { text-align:right; font-size:10px; }
.hero-coordinate > span { color:var(--muted); }
.marquee { overflow:hidden; background:var(--accent); color:var(--accent-on); border-block:var(--line-ink); padding-block:var(--space-3); }
.marquee-track { display:flex; width:max-content; animation:marquee var(--motion-marquee) linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-segment { display:flex; align-items:center; gap:var(--space-6); padding-right:var(--space-6); font-family:var(--font-display); font-weight:900; font-size:clamp(24px,3.1vw,42px); line-height:1.1; letter-spacing:-.015em; white-space:nowrap; }
.marquee-segment > svg { width:24px; height:24px; }
.marquee .outline { color:transparent; -webkit-text-stroke:1px var(--accent-on); }
.section-label { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding-bottom:var(--space-5); border-bottom:var(--rule); font-size:10px; }
.section-label > span:last-child { color:var(--meta); }
.section-heading-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:var(--space-5); padding-top:var(--space-8); }
.section-heading-row h2 { font-size:var(--text-section); font-weight:700; letter-spacing:-.065em; }
.section-heading-row h2 > span { color:var(--accent); }
.section-heading-row h2 > sup { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0; vertical-align:top; display:inline-block; margin-left:var(--space-2); padding-top:var(--space-2); }
.section-heading-row > p { font-size:var(--text-sm); color:var(--muted); line-height:1.8; }
.work-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); margin-top:var(--space-8); padding-bottom:var(--space-6); }
.work-filters { display:flex; gap:var(--space-2); }
.work-filters label { cursor:pointer; position:relative; }
.work-filters input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.work-filters label > span { display:flex; align-items:center; gap:var(--space-2); padding:7px 13px; border:1px solid transparent; font-size:var(--text-xs); transition:background var(--motion-fast), color var(--motion-fast); }
.work-filters input:checked + span { background:var(--fg); color:var(--bg); }
.work-filters input:focus-visible + span { box-shadow:var(--focus-ring); }
.work-filters input:not(:checked) + span:hover { border-color:var(--border); }
.work-filters small { font-family:var(--font-mono); font-size:9px; }
.work-note { display:none; font-size:10px; color:var(--meta); }
.work-grid { display:grid; gap:var(--space-8); }
.project { min-width:0; }
.project-cover { display:block; width:100%; padding:0; border:0; position:relative; text-align:left; overflow:hidden; aspect-ratio:1.13; transform:var(--card-transform, perspective(900px) rotateX(0deg) rotateY(0deg)); transition:transform var(--motion-base) var(--ease-standard); background:var(--fg); color:var(--accent-on); }
.project-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%,color-mix(in srgb,var(--fg) 65%,transparent)); pointer-events:none; }
.project-cover > img { width:100%; height:100%; filter:grayscale(1); object-position:50% 55%; transition:transform var(--motion-enter) var(--ease-standard), filter var(--motion-enter); }
.project-cover:hover > img, .project-cover:focus-visible > img { transform:scale(1.05); filter:grayscale(1) contrast(1.12); }
.photo-overline { position:absolute; top:var(--space-5); left:var(--space-5); z-index:1; font-size:9px; }
.form-cover-word { position:absolute; left:var(--space-6); bottom:var(--space-6); font-family:var(--font-display); font-weight:900; font-size:clamp(78px,12.5vw,154px); letter-spacing:-.05em; line-height:.8; z-index:1; }
.form-cover-word > span { display:block; font-family:var(--font-mono); font-size:8px; line-height:1.5; letter-spacing:.13em; margin-top:var(--space-4); }
.project-hover-label { display:flex; position:absolute; bottom:var(--space-6); right:var(--space-5); align-items:center; gap:var(--space-3); z-index:3; }
.project-hover-label > span { font-size:var(--text-xs); opacity:0; transform:translateX(-8px); transition:opacity var(--motion-base), transform var(--motion-base); }
.project-hover-label > svg { width:40px; height:40px; padding:9px; background:var(--surface); color:var(--fg); border-radius:var(--radius-sm); transition:background var(--motion-base), transform var(--motion-base); }
.project-cover:hover .project-hover-label > span, .project-cover:focus-visible .project-hover-label > span { opacity:1; transform:none; }
.project-cover:hover .project-hover-label > svg { transform:rotate(45deg); }
.project-info { display:flex; justify-content:space-between; align-items:flex-start; padding-top:var(--space-5); gap:var(--space-4); }
.project-tags { font-size:9px; color:var(--meta); margin-bottom:var(--space-2); }
.project-info h3 { font-size:var(--text-lg); font-weight:600; letter-spacing:-.04em; }
.project-description { font-size:var(--text-xs); color:var(--muted); margin-top:var(--space-2); }
.project-index { font-size:10px; padding-top:var(--space-6); color:var(--meta); }
.project-type .project-cover { background:var(--accent); padding:var(--space-5); }
.project-type .project-cover::after { display:none; }
.type-cover-meta { position:relative; display:flex; justify-content:space-between; z-index:1; font-size:9px; }
.type-cover-meta > span { font-size:20px; line-height:1; }
.type-cover-art { display:block; font-family:var(--font-display); font-weight:900; font-size:clamp(42px,8vw,96px); letter-spacing:-.055em; line-height:.87; padding-top:var(--space-4); }
.type-cover-art > span { display:flex; align-items:center; width:fit-content; transition:transform calc(var(--motion-base) * 2) var(--ease-standard); }
.type-cover-art > span:nth-child(2) { margin-left:var(--space-8); }
.type-cover-outline { -webkit-text-stroke:1px var(--accent-on); color:transparent; }
.type-cover-art > span > svg { width:.65em; height:.65em; margin-left:.18em; }
.type-cover-art > .type-cover-last { margin-left:var(--space-3); color:var(--fg); }
.project-cover:hover .type-cover-art > span:nth-child(odd), .project-cover:focus-visible .type-cover-art > span:nth-child(odd) { transform:translateX(12px); }
.project-cover:hover .type-cover-art > span:nth-child(even), .project-cover:focus-visible .type-cover-art > span:nth-child(even) { transform:translateX(-12px); }
.project-cover:hover .type-cover-art svg { animation:orbit var(--motion-cycle) linear infinite; }
.type-cover-footer { display:block; position:absolute; left:var(--space-5); bottom:var(--space-5); font-size:8px; }
.about-section { border-top:var(--rule); }
.about-layout { display:grid; gap:var(--space-8); padding-top:var(--space-8); }
.about-visual { position:relative; align-self:start; }
.about-image-frame { position:relative; aspect-ratio:1.18; overflow:hidden; }
.about-image-frame img { width:100%; height:100%; object-position:40% 28%; filter:grayscale(1) contrast(1.05); }
.image-cross { position:absolute; color:var(--accent-on); font-family:var(--font-mono); font-size:20px; }
.image-cross-one { top:var(--space-3); left:var(--space-4); }
.image-cross-two { bottom:var(--space-3); right:var(--space-4); }
.about-image-caption { display:flex; justify-content:space-between; gap:var(--space-2); font-size:8px; padding-top:var(--space-3); }
.about-image-caption a { padding-block:5px; text-decoration:underline; text-underline-offset:3px; }
.about-sticker { position:absolute; top:var(--space-5); right:calc(var(--space-3) * -1); width:106px; height:106px; transform:rotate(9deg); color:var(--accent-on); background:var(--accent); padding:var(--space-3); display:flex; flex-direction:column; justify-content:space-between; }
.about-sticker > svg { width:30px; height:30px; animation:orbit var(--motion-orbit) linear infinite; }
.about-sticker > span { font-family:var(--font-mono); font-size:10px; line-height:1.3; }
.about-kicker { font-size:10px; color:var(--meta); margin-bottom:var(--space-5); }
.about-content h2 { font-size:clamp(30px,4.4vw,52px); line-height:1.4; font-weight:700; letter-spacing:-.055em; }
.hand-underline { position:relative; white-space:nowrap; }
.hand-underline::after { content:""; position:absolute; left:0; right:0; bottom:-4px; border-bottom:3px solid var(--accent); transform:rotate(-2deg); }
.about-lead { margin-top:var(--space-6); font-size:var(--text-lg); line-height:1.7; }
.about-body { margin-top:var(--space-5); color:var(--muted); font-size:var(--text-sm); line-height:1.9; max-width:38em; }
.about-thoughts { margin-top:var(--space-6); border-top:var(--rule); }
.about-thoughts details { border-bottom:var(--rule); }
.about-thoughts summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding-block:var(--space-4); font-size:var(--text-sm); }
.about-thoughts summary::-webkit-details-marker { display:none; }
.about-thoughts summary svg { transition:transform var(--motion-base) var(--ease-standard); }
.about-thoughts details[open] summary svg { transform:rotate(45deg); }
.about-thoughts summary:hover { color:var(--accent); }
.about-thoughts details > p { padding-bottom:var(--space-5); font-size:var(--text-sm); line-height:1.8; color:var(--muted); }
.about-placeholder { margin-top:var(--space-5); font-size:9px; color:var(--meta); }
.playground-section { background:var(--fg); color:var(--bg); }
.playground-section .section-label { border-bottom-color:var(--muted); }
.playground-section .section-label > span:last-child { color:var(--border); }
.playground-heading { display:flex; justify-content:space-between; gap:var(--space-5); padding-block:var(--space-8); }
.playground-heading h2 { font-size:var(--text-section); line-height:1.2; letter-spacing:-.06em; }
.playground-heading h2 span { color:var(--accent-on); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:8px; text-decoration-thickness:3px; }
.playground-heading p { font-size:var(--text-sm); line-height:1.9; color:var(--border); padding-top:var(--space-6); }
.playground-note { display:none; color:var(--border); text-align:right; font-size:10px; align-self:flex-end; }
.playground-note svg { margin:var(--space-3) 0 0 auto; width:30px; height:30px; }
.playground-workspace { display:grid; border-block:1px solid var(--muted); }
.type-stage { min-width:0; min-height:300px; position:relative; overflow:hidden; background:var(--fg); display:flex; align-items:center; justify-content:center; padding:var(--space-12) var(--space-6); }
.stage-caption { position:absolute; top:var(--space-5); left:var(--space-5); font-size:8px; color:var(--border); z-index:2; }
.stage-grid { position:absolute; inset:0; background-image:linear-gradient(color-mix(in srgb,var(--border) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 10%,transparent) 1px,transparent 1px); background-size:48px 48px; background-position:center; pointer-events:none; mask-image:radial-gradient(ellipse, var(--fg),transparent 80%); }
.stage-type { display:flex; flex-shrink:0; align-items:center; justify-content:center; gap:0; width:max-content; font-family:var(--font-display); font-weight:900; line-height:1.1; font-size:clamp(76px, 17vw, 205px); color:var(--accent-on-ink); letter-spacing:0; position:relative; z-index:1; transform:scale(var(--type-scale,1)); transform-origin:center; }
.ink-paper .stage-type { color:var(--bg); }
.stage-type > span { display:inline-block; flex-shrink:0; animation-delay:calc(var(--i) * -130ms) !important; }
.stage-type > span:not(:last-child) { margin-right:var(--tracking); }
.mode-wave .stage-type > span { animation:wave var(--motion-cycle) ease-in-out infinite; }
.mode-float .stage-type > span { animation:letter-float calc(var(--motion-cycle) * 1.4) ease-in-out infinite; }
.mode-scatter .stage-type > span { transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-r)); animation:scatter-enter var(--motion-enter) var(--ease-standard) both; }
.stage-star { position:absolute; right:var(--space-8); top:var(--space-12); width:28px; height:28px; color:var(--bg); animation:orbit var(--motion-orbit) linear infinite; }
.stage-bottom { display:flex; justify-content:space-between; gap:var(--space-3); position:absolute; bottom:var(--space-5); left:var(--space-5); right:var(--space-5); color:var(--border); font-size:8px; z-index:2; }
.stage-bottom > span:last-child { display:none; }
.easter-wow { background:var(--accent); }
.easter-wow .stage-type { color:var(--accent-on); }
.easter-wow .stage-bottom, .easter-wow .stage-caption { color:var(--accent-on); }
.easter-wow .stage-star { width:70px; height:70px; opacity:.25; }
.playground-controls { border-top:1px solid var(--muted); padding-block:var(--space-6); display:grid; gap:var(--space-5); min-width:0; }
.control-group > label, .control-group > legend { display:flex; align-items:center; justify-content:space-between; font-size:var(--text-xs); margin-bottom:var(--space-3); width:100%; }
.control-group > label > span, .control-group output { color:var(--border); font-size:10px; }
.control-group > input[type=text] { width:100%; background:transparent; color:var(--bg); border:1px solid var(--border); padding:var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-lg); font-weight:500; }
input[type=range] { width:100%; accent-color:var(--accent); height:28px; margin:0; cursor:ew-resize; display:block; }
.segmented-options { display:flex; width:100%; }
.segmented-options label { position:relative; flex:1; cursor:pointer; }
.segmented-options input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; }
.segmented-options label > span { border:1px solid var(--border); display:block; padding:var(--space-2) var(--space-3); text-align:center; font-size:var(--text-xs); margin-right:-1px; }
.segmented-options input:checked + span { background:var(--bg); color:var(--fg); border-color:var(--bg); position:relative; }
.segmented-options input:focus-visible + span { outline:2px solid var(--accent); outline-offset:3px; z-index:1; }
.segmented-options label:hover > span { border-color:var(--border); }
.ink-options { display:flex; gap:var(--space-5); flex-wrap:wrap; }
.ink-options legend { margin-bottom:var(--space-3); }
.ink-options > label { width:auto; margin:0; justify-content:flex-start; gap:var(--space-2); cursor:pointer; }
.ink-options input { accent-color:var(--accent); width:13px; height:13px; margin:0; }
.ink-swatch { display:inline-block; width:12px; height:12px; }
.ink-swatch.red { background:var(--accent); }
.ink-swatch.paper { background:var(--bg); }
.playground-buttons { display:flex; gap:var(--space-3); margin-top:var(--space-1); }
.remix-button { border:1px solid var(--bg); background:var(--bg); color:var(--fg); display:flex; justify-content:space-between; gap:var(--space-5); padding:var(--space-3); align-items:center; font-size:var(--text-xs); flex:1; transition:background var(--motion-base), color var(--motion-base); }
.remix-button > svg { width:18px; height:18px; transition:transform var(--motion-base); }
.remix-button:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-on); }
.remix-button:hover > svg { transform:rotate(60deg); }
.reset-button { background:transparent; color:var(--bg); padding:var(--space-2); border:0; font-size:var(--text-xs); }
.reset-button:hover { text-decoration:underline; text-underline-offset:4px; }
.download-poster { display:flex; width:100%; align-items:center; justify-content:space-between; border:0; border-bottom:1px solid var(--muted); padding:0 0 var(--space-3); background:transparent; color:var(--bg); font-size:var(--text-xs); }
.download-poster:hover { border-color:var(--bg); }
.download-poster svg { width:17px; height:17px; }
.control-footnote { color:var(--border); font-size:8px; margin-top:calc(var(--space-3) * -1); }
.playground-status { min-height:24px; margin-top:var(--space-3); color:var(--border); font-size:var(--text-xs); }
.contact-top { display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-8); gap:var(--space-8); }
.contact-top p { font-size:var(--text-sm); line-height:1.8; }
.contact-top > svg { width:50px; height:50px; color:var(--accent); animation:orbit var(--motion-orbit) linear infinite; }
.contact-title { font-family:var(--font-display); font-size:var(--text-contact); line-height:.95; font-weight:900; letter-spacing:-.055em; margin-top:var(--space-8); }
.contact-title > span { color:var(--accent); }
.contact-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-6); align-items:center; padding-top:var(--space-8); }
.contact-cta { background:var(--fg); color:var(--bg); border:var(--line-ink); padding:var(--space-4) var(--space-5); min-width:235px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); font-size:var(--text-sm); transition:background var(--motion-base), border-color var(--motion-base); }
.contact-cta:hover { background:var(--accent); border-color:var(--accent); }
.contact-cta > svg { transition:transform var(--motion-base); }
.contact-cta:hover > svg { transform:translate(3px,-3px); }
.contact-availability { font-size:10px; line-height:1.8; }
.contact-availability > span:last-child { color:var(--meta); }
.site-footer { background:var(--surface-warm); border-top:var(--rule); padding-top:var(--space-8); }
.footer-main { display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-6); padding-bottom:var(--space-8); }
.footer-brand { font-size:var(--text-2xl); }
.footer-main > p { font-size:10px; grid-row:2; grid-column:1/-1; }
.footer-main > p > span { font-size:8px; color:var(--meta); }
.back-top { display:flex; gap:var(--space-3); align-items:center; font-size:var(--text-xs); grid-row:1; grid-column:2; }
.back-top > svg { width:18px; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); padding-block:var(--space-4); border-top:var(--rule); font-size:8px; }
.footer-bottom button { background:transparent; border:0; padding:6px 0; font:inherit; }
.footer-bottom > a { padding-block:6px; }
.footer-bottom { align-items:center; }
.footer-bottom a:hover, .footer-bottom button:hover { color:var(--accent); }
.site-modal { color:var(--fg); background:var(--surface); border:var(--line-ink); border-radius:var(--radius-md); padding:var(--space-6); width:calc(100% - var(--space-6)); max-width:740px; max-height:calc(100dvh - var(--space-6)); overflow:auto; box-shadow:var(--elev-raised); }
.site-modal::backdrop { background:color-mix(in srgb,var(--fg) 75%,transparent); backdrop-filter:blur(4px); }
.modal-close { display:flex; gap:var(--space-3); align-items:center; border:0; background:transparent; margin:0 0 var(--space-6) auto; padding:var(--space-1) 0 var(--space-1) var(--space-3); font-size:var(--text-xs); }
.modal-close > span { font-size:var(--text-xl); line-height:1; }
.modal-close:hover { color:var(--accent); }
.dialog-eyebrow { color:var(--accent); font-size:9px; padding-bottom:var(--space-3); }
.site-modal h2 { font-size:clamp(26px,4vw,40px); font-weight:700; letter-spacing:-.05em; }
.dialog-intro { font-size:var(--text-sm); color:var(--muted); padding-block:var(--space-4) var(--space-6); line-height:1.8; }
.comparison-image { width:100%; aspect-ratio:1.4; position:relative; overflow:hidden; background:var(--bg); }
.comparison-image > img { width:100%; height:100%; object-position:center; }
.comparison-image > .comparison-overlay { position:absolute; inset:0; filter:contrast(2) brightness(.7); }
.comparison-line { position:absolute; top:0; bottom:0; width:2px; color:var(--accent-on); background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:var(--text-2xl); text-shadow:0 1px 3px var(--fg); }
.comparison-tag { position:absolute; bottom:var(--space-3); left:var(--space-3); background:var(--surface); color:var(--fg); font-size:10px; padding:var(--space-1) var(--space-2); }
.range-label { display:flex; justify-content:space-between; font-size:var(--text-xs); margin-block:var(--space-5) var(--space-2); gap:var(--space-5); }
.small-copy { font-size:10px; color:var(--muted); padding-top:var(--space-4); line-height:1.8; }
.small-copy a { text-decoration:underline; text-underline-offset:3px; }
.type-study-preview { min-height:230px; background:var(--accent); color:var(--accent-on); display:flex; justify-content:center; align-items:center; font-size:clamp(28px,9vw,90px); font-family:var(--font-display); font-weight:900; letter-spacing:-.05em; overflow:hidden; padding:var(--space-8) var(--space-4); }
.type-study-letters { display:flex; flex-shrink:0; width:max-content; transform-origin:center; }
.type-study-letters > span { display:inline-block; flex-shrink:0; }
.type-study-preview.wave .type-study-letters > span { animation:wave var(--motion-cycle) ease-in-out infinite; }
.type-study-preview.stretch .type-study-letters > span { animation:stretch var(--motion-cycle) ease-in-out infinite; }
.field-label { display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--text-xs); padding-block:var(--space-5) var(--space-2); }
.field-label > span { color:var(--meta); }
.type-study > input { width:100%; padding:var(--space-3); border:1px solid var(--border); background:var(--surface-warm); border-radius:var(--radius-sm); color:var(--fg); }
.mode-options { margin-top:var(--space-5); display:flex; gap:var(--space-6); }
.mode-options legend { font-size:var(--text-xs); margin-bottom:var(--space-3); }
.mode-options label { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); cursor:pointer; }
.mode-options input { accent-color:var(--accent); }
.contact-form { display:grid; }
.contact-form > label { font-size:var(--text-sm); display:flex; justify-content:space-between; margin-bottom:var(--space-2); }
.contact-form > label > span { color:var(--meta); font-size:var(--text-xs); }
.contact-form > input, .contact-form > textarea { width:100%; background:var(--surface-warm); color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-3); margin-bottom:var(--space-5); font-size:var(--text-base); resize:vertical; }
.contact-form > textarea::placeholder { color:var(--meta); font-size:var(--text-sm); }
.solid-button { display:flex; justify-content:space-between; align-items:center; gap:var(--space-6); background:var(--fg); color:var(--bg); border:var(--line-ink); padding:var(--space-3) var(--space-4); font-size:var(--text-sm); }
.solid-button:hover { background:var(--accent); border-color:var(--accent); }
.form-status { min-height:24px; font-size:var(--text-xs); margin-top:var(--space-4); }
.reveal { transition:opacity var(--motion-enter) var(--ease-standard),transform var(--motion-enter) var(--ease-standard); }
html[data-motion=on] .reveal.is-visible { animation:reveal-enter var(--motion-enter) var(--ease-standard); }

@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes title-enter { from { transform:translateY(24px); } to { transform:translateY(0); } }
@keyframes reveal-enter { from { transform:translateY(22px); opacity:.6; } to { transform:translateY(0); opacity:1; } }
@keyframes word-enter { from { transform:translateX(12px) scaleX(.98); } to { transform:none; } }
@keyframes equalize { to { transform:scaleY(.35); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes star-breathe { 0%,100% { scale:1; } 50% { scale:.9; } }
@keyframes wave { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-18px); } }
@keyframes letter-float { 0%,100% { transform:translateY(8px) rotate(-4deg); } 50% { transform:translateY(-16px) rotate(4deg); } }
@keyframes scatter-enter { from { transform:translate(0,0) rotate(0); } to { transform:translate(var(--scatter-x),var(--scatter-y)) rotate(var(--scatter-r)); } }
@keyframes stretch { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(1.35); } }

@media (min-width: 640px) {
  :root { --page-gutter:var(--container-gutter-tablet); --section-space:var(--section-y-tablet); }
  .hero { padding-top:var(--space-8); padding-bottom:var(--space-12); }
  .hero-edition { display:inline; }
  .hero-title { font-size:clamp(130px,19vw,210px); }
  .hero-title-last { font-size:clamp(98px,16.8vw,190px); }
  .hero-aside { width:140px; top:var(--space-2); }
  .hero-asterisk { width:106px; margin-left:auto; }
  .hero-side-label { display:block; font-size:9px; line-height:1.7; margin-bottom:var(--space-4); text-align:right; }
  .hero-baseline > span:last-child { display:inline; }
  .hero-baseline { font-size:9px; padding-top:var(--space-8); }
  .hero-footer { grid-template-columns:1.4fr 1fr; }
  .hero-intro { grid-column:auto; }
  .hero-coordinate { display:none; }
  .hero-intro p { font-size:var(--text-lg); }
  .explore-link { justify-self:end; }
  .work-note { display:inline; }
  .work-filters label > span { padding-inline:var(--space-5); }
  .work-grid { gap:var(--space-8); }
  .project-cover { aspect-ratio:1.1; }
  .about-layout { grid-template-columns:.85fr 1fr; gap:var(--space-8); }
  .about-image-frame { aspect-ratio:.74; }
  .about-image-caption { flex-wrap:wrap; }
  .about-sticker { right:calc(var(--space-4) * -1); top:var(--space-8); }
  .playground-note { display:block; }
  .stage-type { font-size:170px; }
  .type-stage { min-height:360px; }
  .stage-bottom > span:last-child { display:inline; }
  .playground-controls { grid-template-columns:1fr 1fr; gap:var(--space-6); }
  .control-footnote { align-self:start; margin-top:0; }
  .contact-top > svg { width:64px; height:64px; }
  .contact-top p { font-size:var(--text-base); }
  .contact-availability { text-align:right; }
  .footer-main { grid-template-columns:1fr 1.5fr auto; }
  .footer-main > p { grid-row:auto; grid-column:auto; }
  .back-top { grid-column:auto; grid-row:auto; }
  .footer-bottom { font-size:9px; }
  .site-modal { padding:var(--space-8); }
}
@media (min-width: 768px) {
  .primary-nav { display:flex; align-items:center; gap:var(--space-6); }
  .primary-nav.is-open { position:static; display:flex; padding:0; border:0; box-shadow:none; background:transparent; }
  .primary-nav a { font-size:var(--text-xs); gap:6px; }
  .menu-toggle { display:none; }
  .header-contact { display:block; }
  .header-actions { gap:var(--space-5); }
  .section-label { font-size:var(--text-xs); }
  .section-heading-row > p { max-width:28em; font-size:var(--text-xs); padding-bottom:var(--space-1); }
  .work-grid { grid-template-columns:1.07fr 1fr; gap:var(--space-8); }
  .project-type { padding-top:var(--space-12); }
  .project-cover { aspect-ratio:.96; }
  .project-type .project-cover { padding:var(--space-6); }
  .type-cover-art { font-size:clamp(48px,7.6vw,94px); padding-top:var(--space-8); }
  .type-cover-footer { left:var(--space-6); bottom:var(--space-6); }
  .form-cover-word { font-size:clamp(100px,12.2vw,154px); }
}
@media (min-width: 1024px) {
  :root { --page-gutter:var(--container-gutter-desktop); --section-space:var(--section-y-desktop); }
  .header-inner { min-height:86px; }
  .brand { font-size:var(--text-xl); }
  .primary-nav { gap:var(--space-8); }
  .primary-nav a { font-size:var(--text-sm); gap:var(--space-2); }
  .header-actions { gap:var(--space-6); }
  .motion-control { font-size:11px; }
  .hero { padding-top:var(--space-8); padding-bottom:var(--space-12); }
  .hero-eyebrow .mono { font-size:10px; }
  .hero-stage { padding-top:var(--space-8); }
  .hero-title { font-size:clamp(170px,17.8vw,230px); }
  .hero-title-last { font-size:clamp(160px,17.3vw,220px); margin-top:var(--space-3); }
  .hero-aside { width:255px; top:var(--space-5); right:var(--space-4); }
  .hero-side-label { font-size:10px; margin:0 0 var(--space-4); position:static; text-align:right; }
  .hero-photo { display:block; width:164px; margin-left:auto; transform:rotate(3deg); }
  .hero-photo img { width:164px; height:112px; filter:grayscale(1); }
  .hero-photo figcaption { font-size:7px; text-align:right; padding-top:var(--space-2); }
  .hero-asterisk { position:absolute; left:0; top:45px; width:112px; margin-top:0; }
  .hero-asterisk .star-hint { position:absolute; left:0; bottom:-27px; }
  .star-hint { display:block; font-size:9px; color:var(--meta); margin-top:var(--space-4); white-space:nowrap; }
  .hero-baseline { padding-top:var(--space-6); font-size:9px; }
  .hero-footer { grid-template-columns:1.4fr 1fr .8fr; align-items:center; padding-top:var(--space-6); }
  .hero-intro p { font-size:var(--text-lg); }
  .hero-intro p > span { font-size:var(--text-xs); }
  .hero-coordinate { display:block; font-size:10px; }
  .explore-link { justify-self:center; }
  .arrow-circle { width:48px; height:48px; }
  .section-heading-row { padding-top:var(--space-8); }
  .section-heading-row > p { font-size:var(--text-sm); }
  .work-toolbar { margin-top:var(--space-8); }
  .work-grid { gap:var(--space-12); }
  .project-type { padding-top:var(--space-12); }
  .project-cover { aspect-ratio:1.04; }
  .type-cover-art { font-size:clamp(65px,7.4vw,96px); }
  .about-layout { grid-template-columns: .83fr 1fr; gap:calc(var(--space-12) * 2); padding-top:var(--space-12); }
  .about-visual { padding-right:var(--space-8); }
  .about-image-frame { aspect-ratio:.85; }
  .about-sticker { width:124px; height:124px; right:var(--space-2); top:var(--space-12); padding:var(--space-4); }
  .about-image-caption { font-size:9px; }
  .about-content { padding-top:var(--space-2); }
  .about-content h2 { font-size:52px; }
  .playground-heading { padding-block:var(--space-12); }
  .playground-workspace { grid-template-columns:minmax(0,1fr) 270px; }
  .playground-controls { display:grid; grid-template-columns:1fr; border-top:0; border-left:1px solid var(--muted); padding:var(--space-6) 0 var(--space-6) var(--space-6); gap:var(--space-5); }
  .type-stage { min-height:470px; padding:var(--space-12) var(--space-8); }
  .stage-type { font-size:205px; }
  .stage-caption { top:var(--space-6); left:0; font-size:9px; }
  .stage-star { right:var(--space-12); top:var(--space-12); width:36px; height:36px; }
  .stage-bottom { left:0; right:var(--space-6); bottom:var(--space-6); font-size:9px; }
  .contact-top { padding-top:var(--space-8); }
  .contact-title { margin-top:var(--space-8); }
  .contact-bottom { padding-top:var(--space-12); }
  .contact-cta { min-width:300px; font-size:var(--text-base); padding:var(--space-5) var(--space-6); }
  .contact-availability { font-size:var(--text-xs); }
  .footer-main { padding-block:var(--space-4) var(--space-12); }
  .footer-main > p { font-size:var(--text-xs); }
  .footer-main > p > span { font-size:9px; }
}
html[data-motion=off] { scroll-behavior:auto; }
html[data-motion=off] *, html[data-motion=off] *::before, html[data-motion=off] *::after { animation:none !important; transition:none !important; }
html[data-motion=off] .project-cover { transform:none !important; }
html[data-motion=off] .reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}
@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}