/* Generated from work.css coverage across all 17 archive pages. */
.project-hero, .about-page-hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0px, 0.86fr) minmax(min(100%, 420px), 0.7fr); align-items: center; gap: clamp(30px, 4vw, 48px); padding-top: clamp(112px, 11vw, 128px); }
body[data-work-slug] { --bg: #ffffff; --panel: rgba(255, 255, 255, 0.78); --panel-strong: rgba(255, 255, 255, 0.94); --text: #111111; --muted: #666a63; --dim: #9a9e96; --line: rgba(17, 17, 17, 0.13); --line-strong: rgba(17, 17, 17, 0.28); --cyan: #111111; --red: #111111; background: rgb(255, 255, 255); color: var(--text); color-scheme: light; }
body[data-work-slug] .brand, body[data-work-slug] .brand small, body[data-work-slug] .nav, body[data-work-slug] .variant-link { color: rgb(17, 17, 17); }
body[data-work-slug] .site-header { top: 18px; padding: 10px 12px; border: 1px solid rgba(17, 17, 17, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.94); box-shadow: rgba(17, 17, 17, 0.08) 0px 18px 48px; backdrop-filter: blur(12px); }
body[data-work-slug] .nav a::after, body[data-work-slug] .variant-link::after { background: rgb(17, 17, 17); }
body[data-work-slug] .menu-toggle { background: rgba(255, 255, 255, 0.88); border-color: rgba(17, 17, 17, 0.16); }
body[data-work-slug] .menu-toggle span { background: rgb(17, 17, 17); }
.project-copy, .about-page-hero > div { max-width: 900px; }
.project-back { display: inline-flex; width: fit-content; margin-bottom: 28px; color: var(--green); font-family: var(--mono); font-size: 0.82rem; text-transform: uppercase; }
.project-title { margin: 0px; max-width: 11ch; font-size: clamp(3.8rem, 7.8vw, 8.8rem); line-height: 0.9; letter-spacing: 0px; overflow-wrap: anywhere; text-wrap: balance; }
.project-title > span { display: block; }
.project-title.is-long { max-width: 15ch; font-size: clamp(2.7rem, 5.2vw, 5.8rem); line-height: 0.98; }
.project-lede { max-width: 780px; margin: 28px 0px 0px; color: rgba(243, 251, 248, 0.8); font-size: clamp(1.1rem, 2vw, 1.42rem); line-height: 1.58; }
body[data-work-slug] .project-back { color: rgb(17, 17, 17); }
body[data-work-slug] .meta-line, body[data-work-slug] .section-kicker, body[data-work-slug] .project-pagination span, body[data-work-slug] .fact-row span, body[data-work-slug] .project-cover-readout span, body[data-work-slug] .project-cover-readout em { color: var(--muted); }
body[data-work-slug] .project-title, body[data-work-slug] .project-title > span, body[data-work-slug] .project-alt-title, body[data-work-slug] .project-text-block h3, body[data-work-slug] .project-pagination strong, body[data-work-slug] .fact-row strong, body[data-work-slug] .project-cover-readout strong, body[data-work-slug] .section-title h2 { color: rgb(17, 17, 17); }
body[data-work-slug] .project-lede, body[data-work-slug] .project-statement p, body[data-work-slug] .project-text-block li, body[data-work-slug] .project-chinese p { color: rgba(17, 17, 17, 0.72); }
body[data-work-slug] .button { border-color: rgb(17, 17, 17); background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
body[data-work-slug] .button:hover, body[data-work-slug] .button:focus-visible { border-color: var(--green); background: var(--green); color: rgb(17, 17, 17); }
.project-alt-title { margin: 18px 0px 0px; color: var(--green); font-size: clamp(1.25rem, 2.4vw, 2.15rem); line-height: 1.15; font-weight: 700; }
.project-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.project-cover { --proximity: 0; --mx: 50%; --my: 50%; --push-x: 0px; --push-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; position: relative; margin: 0px; min-height: clamp(500px, 44vw, 620px); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: rgba(8, 12, 12, 0.72); box-shadow: rgba(179, 255, 40, 0.08) 0px 0px 90px inset, rgba(0, 0, 0, 0.34) 0px 30px 100px; transform: translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018)); transform-style: preserve-3d; will-change: transform; isolation: isolate; }
body[data-work-slug] .project-cover { border-color: rgba(17, 17, 17, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.7); box-shadow: rgba(17, 17, 17, 0.14) 0px 28px 90px, rgba(255, 255, 255, 0.52) 0px 0px 0px 1px inset; }
.project-cover img { display: block; width: 100%; height: 100%; min-height: clamp(500px, 44vw, 620px); object-fit: cover; filter: grayscale(0.08) contrast(1.08) saturate(0.92); }
body[data-work-slug] .project-cover img { filter: grayscale(0.24) contrast(1.08) saturate(0.74); }
.project-cover-link { display: block; width: 100%; height: 100%; }
.project-cover::before { content: ""; position: absolute; inset: 0px; z-index: 1; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.18), transparent 13rem),
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.74)); opacity: calc(0.34 + var(--proximity, 0) * 0.22); pointer-events: none; }
body[data-work-slug] .project-cover::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(179, 255, 40, 0.16), transparent 12rem),
    linear-gradient(180deg, transparent 52%, rgba(255, 255, 255, 0.84)); opacity: calc(0.42 + var(--proximity, 0) * 0.18); mix-blend-mode: normal; }
.project-body { display: grid; grid-template-columns: minmax(0px, 0.74fr) minmax(280px, 0.28fr); gap: clamp(32px, 4vw, 54px); align-items: start; }
.project-statement { display: grid; gap: 24px; }
.project-statement p, .about-bio p { margin: 0px; color: rgba(243, 251, 248, 0.76); font-size: 1.08rem; line-height: 1.82; }
.project-text-block { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
body[data-work-slug] .project-body, body[data-work-slug] .project-gallery, body[data-work-slug] .project-pagination { position: relative; }
.project-text-block h3, .about-block h2 { margin: 0px 0px 16px; color: var(--text); font-size: clamp(1.3rem, 2.2vw, 2.4rem); line-height: 1.05; }
.project-text-block ul, .about-block ul { display: grid; gap: 12px; margin: 0px; padding: 0px; list-style: none; }
.project-text-block li, .about-block li { position: relative; padding-left: 22px; color: rgba(243, 251, 248, 0.7); line-height: 1.68; }
.project-text-block li::before, .about-block li::before { content: ""; position: absolute; left: 0px; top: 0.72em; width: 7px; height: 7px; border: 1px solid var(--green); box-shadow: rgba(179, 255, 40, 0.46) 0px 0px 14px; }
body[data-work-slug] .project-text-block li::before, body[data-work-slug] .about-block li::before { border-color: rgba(17, 17, 17, 0.48); background: var(--green); box-shadow: rgba(17, 17, 17, 0.12) 0px 0px 0px 1px; }
.project-facts { position: sticky; top: 128px; display: grid; border-top: 1px solid var(--line); }
body[data-work-slug] .project-statement, body[data-work-slug] .project-facts { padding: clamp(20px, 2.4vw, 30px); border: 1px solid rgba(17, 17, 17, 0.12); border-radius: 8px; background: linear-gradient(90deg, rgba(179, 255, 40, 0.08), transparent 42%), rgba(255, 255, 255, 0.76); box-shadow: rgba(17, 17, 17, 0.08) 0px 24px 70px; backdrop-filter: blur(8px); }
.fact-row { display: grid; gap: 8px; padding: 18px 0px; border-bottom: 1px solid var(--line); }
.fact-row span { color: var(--green); font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase; }
.fact-row strong { color: rgba(243, 251, 248, 0.86); font-size: 0.98rem; line-height: 1.5; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.media-card { --proximity: 0; --push-x: 0px; --push-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; position: relative; margin: 0px; min-height: clamp(260px, 24vw, 320px); border: 1px solid var(--line); background: rgba(8, 12, 12, 0.72); overflow: hidden; transform: translate3d(var(--push-x), var(--push-y), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--proximity) * 0.018)); will-change: transform; }
body[data-work-slug] .media-card { border-color: rgba(17, 17, 17, 0.13); border-radius: 8px; background: rgba(255, 255, 255, 0.72); box-shadow: rgba(17, 17, 17, 0.1) 0px 24px 68px; }
.media-card img { display: block; width: 100%; height: 100%; min-height: clamp(260px, 24vw, 320px); object-fit: cover; filter: grayscale(0.08) contrast(1.06); }
body[data-work-slug] .media-card img { filter: grayscale(0.18) contrast(1.06) saturate(0.8); }
.media-card-link { display: block; width: 100%; height: 100%; }
.media-card::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(transparent 62%, rgba(0, 0, 0, 0.7)), repeating-linear-gradient(rgba(179, 255, 40, 0.08) 0px, rgba(179, 255, 40, 0.08) 1px, transparent 1px, transparent 5px); pointer-events: none; opacity: calc(0.35 + var(--proximity) * 0.22); }
body[data-work-slug] .media-card::after { background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.9)), repeating-linear-gradient(rgba(17, 17, 17, 0.055) 0px, rgba(17, 17, 17, 0.055) 1px, transparent 1px, transparent 5px); opacity: calc(0.42 + var(--proximity) * 0.18); }
.media-card figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; color: rgba(243, 251, 248, 0.72); font-family: var(--mono); font-size: 0.74rem; }
body[data-work-slug] .media-card figcaption { color: rgba(17, 17, 17, 0.72); }
body[data-work-slug] .project-cover { min-height: 0px; width: 100%; max-width: 1180px; overflow: visible; background: rgba(255, 255, 255, 0.86); }
body[data-work-slug] .project-hero { min-height: 0px; grid-template-columns: 1fr; align-items: start; }
body[data-work-slug] .project-copy { max-width: 1020px; }
body[data-work-slug] .project-cover-link { display: block; height: auto; }
body[data-work-slug] .project-cover img { width: 100%; height: auto; min-height: 0px; object-fit: contain; }
body[data-work-slug] .project-cover::before { display: none; }
body[data-work-slug] .media-grid { grid-template-columns: 1fr; gap: clamp(22px, 3vw, 34px); }
body[data-work-slug] .media-card { min-height: 0px; overflow: visible; background: rgba(255, 255, 255, 0.86); }
body[data-work-slug] .media-card-link { height: auto; }
body[data-work-slug] .media-card img { width: 100%; height: auto; min-height: 0px; object-fit: contain; }
body[data-work-slug] .media-card::after, body[data-work-slug] .project-cover-scan { display: none; }
body[data-work-slug] .media-card figcaption { position: static; padding: 12px 14px 14px; background: rgba(255, 255, 255, 0.82); }
body[data-work-slug] { --work-bg: #ffffff; --work-ink: #111111; --work-soft-ink: rgba(17, 17, 17, 0.72); --work-muted-ink: rgba(17, 17, 17, 0.56); --work-accent: #b3ff28; --work-accent-2: #111111; --work-border: rgba(17, 17, 17, 0.14); --work-panel-bg: rgba(255, 255, 255, 0.78); --work-card-bg: rgba(255, 255, 255, 0.88); --work-readout-bg: rgba(255, 255, 255, 0.86); --work-node-bg: var(--work-card-bg); --work-node-border: var(--work-border); --work-radius: 8px; --work-archive-opacity: 0.48; --work-archive-blend: multiply; --work-archive-filter: grayscale(0.72) contrast(0.92) brightness(1.18); --work-image-filter: grayscale(0.08) contrast(1.04) saturate(0.92); --work-panel-shadow: 0 24px 70px rgba(17, 17, 17, 0.1); --work-motif-opacity: 0.16; --work-motif-blend: multiply; --work-motif: linear-gradient(90deg, rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px); --work-display-font: "Unbounded", "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", "Microsoft YaHei UI", "Noto Sans SC", Consolas, monospace; --work-title-weight: 800; --work-title-style: normal; --work-title-letter-spacing: 0; --work-title-word-spacing: 0.02em; --work-title-stance: none; --work-title-origin: 0 72%; --work-title-filter: none; --work-title-first-color: var(--work-accent); --work-title-first-size: 1em; --work-world-title-stance: none; --work-world-primary-stance: none; --work-body-letter-spacing: 0; --work-label-letter-spacing: 0.08em; --work-scheme: light; --bg: var(--work-bg); --panel: var(--work-panel-bg); --panel-strong: var(--work-card-bg); --text: var(--work-ink); --muted: var(--work-muted-ink); --dim: var(--work-muted-ink); --line: var(--work-border); --line-strong: color-mix(in srgb, var(--work-border) 66%, var(--work-ink)); --green: var(--work-accent); --cyan: var(--work-accent); --red: var(--work-accent-2); --sans: var(--work-text-font); --mono: var(--work-code-font); background: var(--work-bg); color: var(--work-ink); color-scheme: var(--work-scheme); font-family: var(--work-text-font); letter-spacing: var(--work-body-letter-spacing); }
body[data-work-slug]::before { content: ""; position: fixed; inset: 0px; z-index: 1; pointer-events: none; background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: var(--work-motif-size, 48px 48px); opacity: var(--work-motif-opacity); mix-blend-mode: var(--work-motif-blend); }
body[data-work-slug]::after { content: ""; position: fixed; inset: 0px; z-index: 1; pointer-events: none; background: var(--work-field, none); opacity: var(--work-field-opacity, 0.16); mix-blend-mode: var(--work-field-blend, multiply); }
body[data-work-slug] .site-header, body[data-work-slug] .project-statement, body[data-work-slug] .project-facts, body[data-work-slug] .project-cover, body[data-work-slug] .media-card, body[data-work-slug] .project-pagination a { border-color: var(--work-border); border-radius: var(--work-radius); background: var(--work-panel-bg); box-shadow: var(--work-panel-shadow); }
body[data-work-slug] .brand, body[data-work-slug] .brand small, body[data-work-slug] .nav, body[data-work-slug] .variant-link { color: var(--work-header-ink, var(--work-ink)); }
body[data-work-slug] .nav a::after, body[data-work-slug] .variant-link::after, body[data-work-slug] .menu-toggle span { background: var(--work-header-ink, var(--work-ink)); }
body[data-work-slug] .menu-toggle { background: var(--work-readout-bg); border-color: var(--work-border); }
body[data-work-slug] .project-cover, body[data-work-slug] .media-card { background: var(--work-card-bg); }
body[data-work-slug] .project-cover img, body[data-work-slug] .media-card img { filter: var(--work-image-filter); }
body[data-work-slug] .site-header, body[data-work-slug] .project-statement, body[data-work-slug] .project-facts, body[data-work-slug] .project-lede, body[data-work-slug] .project-text-block, body[data-work-slug] .project-chinese, body[data-work-slug] .world-header p { font-family: var(--work-text-font); }
body[data-work-slug] .project-cover-readout, body[data-work-slug] .media-card figcaption { border-color: var(--work-border); background: var(--work-readout-bg); color: var(--work-soft-ink); }
body[data-work-slug] .project-title, body[data-work-slug] .project-title > span, body[data-work-slug] .project-alt-title, body[data-work-slug] .section-title h2, body[data-work-slug] .project-text-block h3, body[data-work-slug] .fact-row strong, body[data-work-slug] .project-pagination strong, body[data-work-slug] .project-cover-readout strong { color: var(--work-ink); }
body[data-work-slug] .project-lede, body[data-work-slug] .project-statement p, body[data-work-slug] .project-text-block li, body[data-work-slug] .project-chinese p { color: var(--work-soft-ink); }
body[data-work-slug] .meta-line, body[data-work-slug] .section-kicker, body[data-work-slug] .project-pagination span, body[data-work-slug] .fact-row span, body[data-work-slug] .project-cover-readout span, body[data-work-slug] .project-cover-readout em { color: var(--work-muted-ink); }
body[data-work-slug] .button { border-color: var(--work-accent-2); background: var(--work-accent-2); color: var(--work-bg); }
body[data-work-slug] .button:hover, body[data-work-slug] .button:focus-visible, body[data-work-slug] .project-text-block li::before, body[data-work-slug] .about-block li::before { border-color: var(--work-accent); background: var(--work-accent); color: var(--work-ink); }
body[data-work-slug] .project-title { position: relative; width: fit-content; max-width: var(--work-title-max, 11ch); margin-inline: var(--work-title-margin, 0); font-family: var(--work-display-font); font-size: var(--work-title-size, clamp(3.8rem, 7.8vw, 8.8rem)); font-style: var(--work-title-style); font-weight: var(--work-title-weight); line-height: var(--work-title-line-height, 0.9); text-align: var(--work-title-align, left); text-transform: var(--work-title-transform, none); letter-spacing: var(--work-title-letter-spacing); word-spacing: var(--work-title-word-spacing); text-shadow: var(--work-title-shadow, none); transform: var(--work-title-stance); transform-origin: var(--work-title-origin); filter: var(--work-title-filter); }
body[data-work-slug] .project-title > span { -webkit-text-stroke: var(--work-title-stroke, 0 transparent); transform: var(--work-title-span-stance, none); }
body[data-work-slug] .project-title > span::first-letter { color: var(--work-title-first-color); font-size: var(--work-title-first-size); }
body[data-work-slug] .project-title::after { content: ""; display: none; width: var(--work-title-mark-width, min(100%, 280px)); height: var(--work-title-mark-height, 5px); margin-top: clamp(14px, 2vw, 24px); background: var(--work-title-mark, var(--work-accent)); box-shadow: var(--work-title-mark-shadow, none); transform: var(--work-title-mark-transform, none); }
body[data-work-slug] .project-copy { max-width: var(--work-copy-max, 1020px); margin-inline: var(--work-copy-margin, 0); text-align: var(--work-copy-align, left); }
body[data-work-slug] .project-back, body[data-work-slug] .project-actions { justify-content: var(--work-copy-justify, flex-start); }
body[data-work-slug] .project-hero { gap: var(--work-hero-gap, clamp(30px, 4vw, 48px)); }
body[data-work-slug] .project-body { grid-template-columns: var(--work-body-columns, minmax(0, 0.74fr) minmax(280px, 0.28fr)); gap: var(--work-body-gap, clamp(32px, 4vw, 54px)); }
body[data-work-slug] .project-statement, body[data-work-slug] .project-facts, body[data-work-slug] .project-cover, body[data-work-slug] .media-card, body[data-work-slug] .project-pagination a { border-style: var(--work-border-style, solid); border-width: var(--work-border-width, 1px); }
body[data-work-slug] .project-statement::before, body[data-work-slug] .project-facts::before { content: ""; display: block; height: var(--work-section-mark-height, 4px); margin-bottom: clamp(4px, 1vw, 12px); background: var(--work-section-mark, linear-gradient(90deg, var(--work-accent), transparent)); opacity: var(--work-section-mark-opacity, 1); }
body[data-work-slug] .project-cover, body[data-work-slug] .media-card { outline: var(--work-media-outline, 0 solid transparent); outline-offset: var(--work-media-outline-offset, 0); padding: var(--work-media-padding, 0); }
body[data-work-slug] .project-cover img, body[data-work-slug] .media-card img { border-radius: var(--work-image-radius, 0); box-shadow: var(--work-image-shadow, none); background: var(--work-image-bg, transparent); }
body[data-work-slug] .media-grid { gap: var(--work-media-gap, clamp(22px, 3vw, 34px)); }
body[data-work-slug] .media-card figcaption { text-align: var(--work-caption-align, left); }
body[data-work-slug="digitaleden"] { --work-bg: #03140e; --work-ink: #e9fff2; --work-soft-ink: rgba(233, 255, 242, 0.76); --work-muted-ink: rgba(174, 219, 192, 0.58); --work-accent: #25ff9c; --work-accent-2: #7df7d4; --work-border: rgba(37, 255, 156, 0.24); --work-panel-bg: rgba(4, 32, 22, 0.78); --work-card-bg: rgba(2, 22, 15, 0.9); --work-readout-bg: rgba(2, 24, 16, 0.9); --work-display-font: "Workbench", "Spline Sans Mono", "IBM Plex Mono", "Lucida Console", "Microsoft YaHei UI", "Noto Sans SC", monospace; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-scheme: dark; --work-title-weight: 400; --work-title-letter-spacing: -0.018em; --work-title-word-spacing: 0; --work-title-stance: skewX(-4deg); --work-world-primary-stance: skewX(5deg); --work-motif-opacity: 0.1; --work-field-opacity: 0.12; --work-archive-filter: grayscale(0.2) contrast(1.05) saturate(1.08) brightness(1.12); --work-image-filter: saturate(1.06) contrast(1.03); --work-copy-max: 880px; --work-title-max: 9ch; --work-body-columns: minmax(0, 0.68fr) minmax(300px, 0.32fr); --work-media-padding: clamp(10px, 1.4vw, 18px); --work-image-radius: 14px; --work-readout-radius: 0 0 18px 18px; --work-title-shadow: 0 0 34px rgba(37, 255, 156, 0.32); --work-title-mark: linear-gradient(90deg, #25ff9c, transparent); --work-section-mark: linear-gradient(90deg, #25ff9c, transparent 70%); --work-page-mark: linear-gradient(90deg, #25ff9c, #0b6f55); --work-motif: radial-gradient(circle at 22% 22%, rgba(37, 255, 156, 0.22), transparent 18rem),
    linear-gradient(90deg, rgba(11, 111, 85, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11, 111, 85, 0.06) 1px, transparent 1px); }
body[data-work-slug="famousbutugly"] { --work-bg: #fbfbf8; --work-ink: #080808; --work-soft-ink: rgba(8, 8, 8, 0.76); --work-muted-ink: rgba(8, 8, 8, 0.5); --work-accent: #ff3131; --work-accent-2: #111111; --work-border: rgba(8, 8, 8, 0.22); --work-radius: 2px; --work-panel-bg: rgba(255, 255, 255, 0.78); --work-card-bg: rgba(255, 255, 255, 0.94); --work-readout-bg: rgba(255, 255, 255, 0.92); --work-display-font: "Rubik Glitch", "Archivo Black", Impact, "Arial Black", "Microsoft YaHei UI", sans-serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Microsoft YaHei UI", monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.018em; --work-title-word-spacing: 0; --work-title-stance: rotate(-0.6deg) skewX(-3deg); --work-world-title-stance: rotate(0.4deg); --work-motif-opacity: 0.12; --work-label-letter-spacing: 0.12em; --work-archive-filter: grayscale(1) contrast(1.28) brightness(1.18); --work-image-filter: grayscale(0.72) contrast(1.18) saturate(0.72); --work-copy-max: 1160px; --work-title-max: 13ch; --work-title-size: clamp(3.8rem, 8.8vw, 10.4rem); --work-title-transform: uppercase; --work-body-columns: minmax(0, 0.58fr) minmax(260px, 0.42fr); --work-border-width: 2px; --work-pagination-height: 118px; --work-readout-transform: uppercase; --work-caption-align: center; --work-title-stroke: 1px rgba(255, 49, 49, 0.26); --work-title-mark-height: 10px; --work-title-mark: repeating-linear-gradient(90deg, #ff3131 0 14px, #080808 14px 18px, transparent 18px 28px); --work-section-mark: repeating-linear-gradient(90deg, #080808 0 12px, transparent 12px 18px, #ff3131 18px 26px, transparent 26px 34px); --work-border-style: dashed; --work-page-mark: #ff3131; --work-motif-size: 12px 12px; --work-motif: radial-gradient(circle, rgba(8, 8, 8, 0.12) 0 1px, transparent 1.2px),
    linear-gradient(90deg, rgba(255, 49, 49, 0.18) 0 2px, transparent 2px 64px); }
body[data-work-slug="josephsmidnightparty"] { --work-bg: #110713; --work-ink: #fff4fb; --work-soft-ink: rgba(255, 244, 251, 0.76); --work-muted-ink: rgba(219, 180, 229, 0.56); --work-accent: #ff4fb8; --work-accent-2: #a78bff; --work-border: rgba(255, 79, 184, 0.26); --work-panel-bg: rgba(27, 12, 43, 0.76); --work-card-bg: rgba(19, 8, 31, 0.9); --work-readout-bg: rgba(27, 12, 43, 0.92); --work-display-font: "Monoton", "Instrument Serif", "Times New Roman", "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 400; --work-title-style: normal; --work-title-letter-spacing: -0.035em; --work-title-word-spacing: 0.02em; --work-title-stance: rotate(-1.4deg); --work-title-first-size: 1.08em; --work-world-title-stance: rotate(0.8deg); --work-world-primary-stance: rotate(-1deg); --work-motif-opacity: 0.08; --work-field-opacity: 0.12; --work-scheme: dark; --work-archive-filter: grayscale(0.38) contrast(1.04) saturate(0.92) hue-rotate(8deg); --work-image-filter: saturate(0.92) contrast(1.04); --work-copy-max: 980px; --work-title-max: 12ch; --work-title-size: clamp(4.2rem, 8.4vw, 9.6rem); --work-hero-gap: clamp(42px, 6vw, 76px); --work-media-padding: clamp(8px, 1.2vw, 14px); --work-image-radius: 28px 28px 6px 6px; --work-readout-radius: 0 0 28px 28px; --work-pagination-height: 168px; --work-title-shadow: 0 0 18px rgba(255, 79, 184, 0.4), -5px 5px 0 rgba(167, 139, 255, 0.28), 0 22px 38px rgba(0, 0, 0, 0.34); --work-title-mark: linear-gradient(90deg, #ff4fb8, #4930a8 54%, transparent); --work-title-mark-transform: skewX(-14deg); --work-section-mark: linear-gradient(90deg, #4930a8, #ff4fb8, transparent); --work-page-mark: linear-gradient(90deg, #4930a8, #ff4fb8); --work-field: radial-gradient(circle at 18% 76%, rgba(255, 79, 184, 0.16), transparent 20rem),
    radial-gradient(circle at 82% 30%, rgba(73, 48, 168, 0.15), transparent 18rem); --work-motif: linear-gradient(135deg, rgba(73, 48, 168, 0.08) 0 1px, transparent 1px 26px),
    linear-gradient(45deg, rgba(255, 79, 184, 0.07) 0 1px, transparent 1px 22px); }
body[data-work-slug="weliveinthebestera"] { --work-bg: #fbfff2; --work-ink: #11180b; --work-soft-ink: rgba(17, 24, 11, 0.74); --work-muted-ink: rgba(17, 24, 11, 0.5); --work-accent: #d7ff00; --work-accent-2: #1859ff; --work-border: rgba(24, 89, 255, 0.2); --work-panel-bg: rgba(251, 255, 242, 0.8); --work-card-bg: rgba(255, 255, 248, 0.92); --work-readout-bg: rgba(250, 255, 231, 0.92); --work-display-font: "Climate Crisis", "Unbounded", "Archivo Black", Impact, "Microsoft YaHei UI", sans-serif; --work-text-font: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; --work-code-font: "IBM Plex Mono", Consolas, monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.055em; --work-title-word-spacing: 0.02em; --work-title-stance: rotate(-0.5deg) skewX(-3deg); --work-title-transform: uppercase; --work-world-title-stance: rotate(-0.4deg); --work-motif-opacity: 0.1; --work-label-letter-spacing: 0.16em; --work-image-filter: contrast(1.08) saturate(1.05); --work-copy-max: 920px; --work-copy-margin: 0 0 0 auto; --work-copy-align: right; --work-copy-justify: flex-end; --work-title-max: 11ch; --work-title-margin: 0 0 0 auto; --work-title-align: right; --work-body-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr); --work-border-width: 2px; --work-image-radius: 0; --work-readout-transform: uppercase; --work-title-shadow: -5px 0 0 rgba(24, 89, 255, 0.74), 7px 9px 0 rgba(215, 255, 0, 0.86), 0 24px 42px rgba(24, 89, 255, 0.16); --work-title-stroke: 1px rgba(24, 89, 255, 0.58); --work-title-mark-height: 12px; --work-title-mark: linear-gradient(90deg, #11180b 0 12%, #d7ff00 12% 42%, #1859ff 42% 54%, transparent 54%); --work-section-mark: repeating-linear-gradient(90deg, #1859ff 0 2px, transparent 2px 12px, #d7ff00 12px 22px, transparent 22px 34px); --work-page-mark: linear-gradient(90deg, #d7ff00, #1859ff); --work-motif-size: 34px 34px; --work-motif: radial-gradient(circle, rgba(24, 89, 255, 0.18) 0 2px, transparent 2.5px),
    linear-gradient(90deg, rgba(215, 255, 0, 0.12) 0 8px, transparent 8px 34px); }
body[data-work-slug="andalusianhorsecaramelo"] { --work-bg: #fbfaf4; --work-ink: #20150f; --work-soft-ink: rgba(32, 21, 15, 0.74); --work-muted-ink: rgba(32, 21, 15, 0.52); --work-accent: #c46d2e; --work-accent-2: #0b6b69; --work-border: rgba(196, 109, 46, 0.24); --work-panel-bg: rgba(255, 253, 247, 0.82); --work-card-bg: rgba(255, 251, 242, 0.94); --work-readout-bg: rgba(255, 249, 237, 0.92); --work-display-font: "Syne", "Instrument Serif", Georgia, "Times New Roman", "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Microsoft YaHei UI", monospace; --work-title-weight: 800; --work-title-style: normal; --work-title-letter-spacing: -0.045em; --work-title-word-spacing: 0.03em; --work-title-stance: rotate(-0.8deg); --work-title-first-size: 1.05em; --work-world-primary-stance: rotate(0.8deg); --work-motif-opacity: 0.11; --work-image-filter: sepia(0.12) saturate(1.1) contrast(1.02); --work-copy-max: 1080px; --work-title-max: 14ch; --work-title-size: clamp(3.5rem, 6.6vw, 7.8rem); --work-body-columns: minmax(0, 0.62fr) minmax(300px, 0.38fr); --work-media-padding: clamp(12px, 1.8vw, 24px); --work-image-radius: 18px; --work-readout-radius: 18px; --work-caption-align: right; --work-title-shadow: 0 18px 34px rgba(196, 109, 46, 0.14); --work-title-mark: linear-gradient(90deg, #c46d2e, #0b6b69, transparent); --work-section-mark: linear-gradient(90deg, #c46d2e, rgba(11, 107, 105, 0.32), transparent); --work-media-outline: 1px solid rgba(196, 109, 46, 0.18); --work-media-outline-offset: 6px; --work-page-mark: #c46d2e; --work-motif: radial-gradient(ellipse at 72% 16%, rgba(11, 107, 105, 0.12), transparent 20rem),
    repeating-linear-gradient(28deg, rgba(196, 109, 46, 0.12) 0 1px, transparent 1px 20px); }
body[data-work-slug="proveyouarenotarobot"] { --work-bg: #008080; --work-ink: #050505; --work-soft-ink: rgba(5, 5, 5, 0.82); --work-muted-ink: rgba(5, 5, 5, 0.58); --work-accent: #000080; --work-accent-2: #ffff00; --work-border: #808080; --work-panel-bg: #c0c0c0; --work-card-bg: #c0c0c0; --work-readout-bg: #c0c0c0; --work-display-font: "MS Sans Serif", Tahoma, "Segoe UI", "Microsoft YaHei UI", Arial, sans-serif; --work-text-font: "MS Sans Serif", Tahoma, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; --work-code-font: "Lucida Console", "IBM Plex Mono", Consolas, monospace; --work-title-weight: 900; --work-title-letter-spacing: -0.055em; --work-title-word-spacing: 0.01em; --work-title-transform: uppercase; --work-title-stance: none; --work-world-title-stance: none; --work-world-primary-stance: none; --work-motif-opacity: 0.26; --work-label-letter-spacing: 0.06em; --work-radius: 0; --work-image-filter: contrast(1.03) saturate(0.88); --work-copy-max: 980px; --work-title-max: 14ch; --work-title-size: clamp(3.6rem, 7.4vw, 8.4rem); --work-title-line-height: 0.88; --work-body-columns: minmax(0, 1fr) minmax(280px, 0.44fr); --work-border-width: 2px; --work-media-padding: 8px; --work-image-radius: 0; --work-readout-radius: 0; --work-readout-transform: uppercase; --work-pagination-height: 132px; --work-title-mark-height: 14px; --work-title-mark: repeating-linear-gradient(90deg, #2f73ff 0 18px, #f7c948 18px 26px, transparent 26px 36px); --work-section-mark: linear-gradient(90deg, #000080, #000080); --work-section-mark-height: 20px; --work-border-style: solid; --work-media-outline: 2px solid #808080; --work-media-outline-offset: 4px; --work-page-mark: #000080; --work-panel-shadow: 2px 2px 0 #000000; --work-motif-size: 64px 64px; --work-motif: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
    radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.28) 0 2px, transparent 2px); }
body[data-work-slug="proveyouarenotarobot"] .site-header, body[data-work-slug="proveyouarenotarobot"] .project-copy, body[data-work-slug="proveyouarenotarobot"] .project-statement, body[data-work-slug="proveyouarenotarobot"] .project-facts, body[data-work-slug="proveyouarenotarobot"] .project-cover, body[data-work-slug="proveyouarenotarobot"] .media-card, body[data-work-slug="proveyouarenotarobot"] .project-pagination a, body[data-work-slug="proveyouarenotarobot"] .project-world { border-width: 2px; border-style: solid; border-image: none; border-color: rgb(255, 255, 255) rgb(64, 64, 64) rgb(64, 64, 64) rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(0, 0, 0) 2px 2px 0px; background: rgb(192, 192, 192); backdrop-filter: none; }
body[data-work-slug="proveyouarenotarobot"] .project-copy { position: relative; padding: clamp(52px, 5vw, 64px) clamp(18px, 3vw, 30px) clamp(20px, 3vw, 30px); }
body[data-work-slug="proveyouarenotarobot"] .project-copy::before, body[data-work-slug="proveyouarenotarobot"] .project-world::before, body[data-work-slug="proveyouarenotarobot"] .project-statement::before, body[data-work-slug="proveyouarenotarobot"] .project-facts::before { content: "captcha.exe"; display: block; height: 22px; margin: 0px 0px 18px; padding: 3px 8px; background: rgb(0, 0, 128); color: rgb(255, 255, 255); font-family: var(--work-text-font); font-size: 0.82rem; font-weight: 700; line-height: 1; text-transform: none; box-sizing: border-box; }
body[data-work-slug="proveyouarenotarobot"] .project-copy::before { position: absolute; top: 6px; left: 6px; right: 6px; margin: 0px; content: "PROVEYOU.EXE"; }
body[data-work-slug="proveyouarenotarobot"] .project-title { color: rgb(5, 5, 5); text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(128, 128, 128) 2px 2px 0px; }
body[data-work-slug="proveyouarenotarobot"] .project-lede, body[data-work-slug="proveyouarenotarobot"] .project-statement p, body[data-work-slug="proveyouarenotarobot"] .project-chinese p { font-size: clamp(0.98rem, 1.35vw, 1.12rem); line-height: 1.55; }
body[data-work-slug="proveyouarenotarobot"] .button { border-width: 2px; border-style: solid; border-image: none; border-color: rgb(255, 255, 255) rgb(64, 64, 64) rgb(64, 64, 64) rgb(255, 255, 255); border-radius: 0px; background: rgb(192, 192, 192); color: rgb(0, 0, 0); box-shadow: rgb(0, 0, 0) 1px 1px 0px; }
body[data-work-slug="proveyouarenotarobot"] .button:hover, body[data-work-slug="proveyouarenotarobot"] .button:focus-visible { border-color: rgb(64, 64, 64) rgb(255, 255, 255) rgb(255, 255, 255) rgb(64, 64, 64); background: rgb(212, 208, 200); color: rgb(0, 0, 0); }
body[data-work-slug="proveyouarenotarobot"] .project-cover-readout, body[data-work-slug="proveyouarenotarobot"] .media-card figcaption, body[data-work-slug="proveyouarenotarobot"] .world-node-list i, body[data-work-slug="proveyouarenotarobot"] .world-readouts b { border-width: 2px; border-style: solid; border-image: none; border-color: rgb(64, 64, 64) rgb(255, 255, 255) rgb(255, 255, 255) rgb(64, 64, 64); border-radius: 0px; background: rgb(255, 255, 255); color: rgb(5, 5, 5); }
body[data-work-slug="21stcenturymonologue"] { --work-bg: #060b17; --work-ink: #eef4ff; --work-soft-ink: rgba(238, 244, 255, 0.72); --work-muted-ink: rgba(141, 166, 206, 0.56); --work-accent: #ff284f; --work-accent-2: #6e8fff; --work-border: rgba(255, 40, 79, 0.3); --work-panel-bg: rgba(8, 15, 32, 0.78); --work-card-bg: rgba(6, 11, 23, 0.9); --work-readout-bg: rgba(9, 16, 34, 0.92); --work-display-font: "Rubik Glitch", "IBM Plex Mono", "Spline Sans Mono", "Courier New", "Microsoft YaHei UI", monospace; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Courier New", Consolas, monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.03em; --work-title-word-spacing: 0; --work-title-stance: rotate(0.4deg) skewX(4deg); --work-world-title-stance: skewX(-4deg); --work-motif-opacity: 0.1; --work-field-opacity: 0.1; --work-scheme: dark; --work-archive-filter: grayscale(0.64) contrast(1.1) brightness(1.12); --work-image-filter: grayscale(0.2) contrast(1.1) saturate(0.9); --work-copy-max: 760px; --work-title-max: 8.5ch; --work-title-size: clamp(4rem, 8vw, 9rem); --work-body-columns: minmax(0, 0.7fr) minmax(260px, 0.3fr); --work-media-gap: 12px; --work-caption-align: center; --work-readout-transform: uppercase; --work-pagination-height: 104px; --work-title-shadow: 4px 0 0 rgba(255, 40, 79, 0.18), -4px 0 0 rgba(31, 88, 255, 0.16); --work-title-mark: repeating-linear-gradient(90deg, #ff284f 0 8px, transparent 8px 12px, #1f58ff 12px 18px, transparent 18px 26px); --work-section-mark: repeating-linear-gradient(180deg, rgba(255, 40, 79, 0.56) 0 1px, transparent 1px 5px); --work-page-mark: linear-gradient(90deg, #ff284f, #1f58ff); --work-motif-size: 100% 7px, 46px 46px; --work-motif: repeating-linear-gradient(180deg, rgba(255, 40, 79, 0.12) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(31, 88, 255, 0.08) 1px, transparent 1px); }
body[data-work-slug="metahuman"] { --work-bg: #070a10; --work-ink: #f5fbff; --work-soft-ink: rgba(245, 251, 255, 0.74); --work-muted-ink: rgba(168, 188, 208, 0.56); --work-accent: #00d8ff; --work-accent-2: #ff6faf; --work-border: rgba(0, 216, 255, 0.28); --work-panel-bg: rgba(10, 14, 23, 0.78); --work-card-bg: rgba(8, 12, 20, 0.92); --work-readout-bg: rgba(11, 16, 27, 0.92); --work-display-font: "Syne", "Unbounded", "Space Grotesk", "Microsoft YaHei UI", sans-serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 800; --work-title-letter-spacing: -0.065em; --work-title-word-spacing: 0; --work-title-stance: rotate(-0.35deg); --work-title-transform: uppercase; --work-world-primary-stance: rotate(0.45deg); --work-motif-opacity: 0.08; --work-field-opacity: 0.1; --work-scheme: dark; --work-archive-filter: grayscale(0.18) contrast(1.04) saturate(0.88) brightness(1.08); --work-image-filter: saturate(0.9) contrast(1.04); --work-copy-max: 900px; --work-copy-margin: 0 auto; --work-copy-align: center; --work-copy-justify: center; --work-title-max: 12ch; --work-title-margin: 0 auto; --work-title-align: center; --work-body-columns: minmax(0, 1fr); --work-media-padding: clamp(14px, 2vw, 26px); --work-image-radius: 30px; --work-readout-radius: 999px; --work-pagination-columns: repeat(3, minmax(0, 1fr)); --work-title-shadow: -3px 0 0 rgba(0, 216, 255, 0.42), 3px 8px 0 rgba(255, 111, 175, 0.22), 0 34px 70px rgba(0, 216, 255, 0.16); --work-title-mark-height: 10px; --work-title-mark: linear-gradient(90deg, #f5fbff 0 14%, #00d8ff 14% 48%, #ff6faf 48% 55%, transparent 55%); --work-section-mark: linear-gradient(90deg, rgba(0, 216, 255, 0.8), rgba(255, 111, 175, 0.72), transparent); --work-media-outline: 1px solid rgba(0, 216, 255, 0.2); --work-media-outline-offset: 8px; --work-page-mark: linear-gradient(90deg, #00d8ff, #ff6faf); --work-field: radial-gradient(circle at 82% 12%, rgba(0, 216, 255, 0.14), transparent 18rem),
    radial-gradient(circle at 18% 86%, rgba(255, 111, 175, 0.12), transparent 18rem); --work-motif: linear-gradient(120deg, rgba(0, 216, 255, 0.11) 0 1px, transparent 1px 28px),
    linear-gradient(60deg, rgba(255, 111, 175, 0.08) 0 1px, transparent 1px 28px); }
body[data-work-slug="errorcurrency"] { --work-bg: #061711; --work-ink: #e8fff3; --work-soft-ink: rgba(232, 255, 243, 0.76); --work-muted-ink: rgba(151, 199, 170, 0.58); --work-accent: #0fbf76; --work-accent-2: #ff4056; --work-border: rgba(15, 191, 118, 0.36); --work-panel-bg: rgba(5, 28, 19, 0.82); --work-card-bg: rgba(4, 24, 16, 0.94); --work-readout-bg: rgba(5, 30, 20, 0.92); --work-display-font: "Bungee Shade", "Instrument Serif", Georgia, "Times New Roman", "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.035em; --work-title-word-spacing: 0; --work-title-stance: rotate(-0.4deg); --work-title-first-size: 1.08em; --work-world-title-stance: rotate(0.4deg); --work-motif-opacity: 0.11; --work-field-opacity: 0.1; --work-scheme: dark; --work-image-filter: contrast(1.1) saturate(1.06); --work-copy-max: 1120px; --work-copy-margin: 0 auto; --work-copy-align: center; --work-copy-justify: center; --work-title-max: 11ch; --work-title-margin: 0 auto; --work-title-align: center; --work-title-transform: uppercase; --work-body-columns: minmax(0, 0.55fr) minmax(300px, 0.45fr); --work-border-style: double; --work-border-width: 4px; --work-media-padding: clamp(14px, 2vw, 28px); --work-image-radius: 6px; --work-readout-transform: uppercase; --work-title-shadow: 0 12px 0 rgba(15, 191, 118, 0.1); --work-title-mark-height: 9px; --work-title-mark: repeating-linear-gradient(90deg, #0fbf76 0 8px, transparent 8px 14px, #d3263a 14px 18px, transparent 18px 24px); --work-section-mark: repeating-linear-gradient(90deg, rgba(15, 191, 118, 0.82) 0 1px, transparent 1px 7px); --work-page-mark: linear-gradient(90deg, #0fbf76, #d3263a); --work-motif-size: 160px 80px; --work-motif: repeating-radial-gradient(ellipse at center, rgba(15, 191, 118, 0.16) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(211, 38, 58, 0.09), transparent 45%, rgba(15, 191, 118, 0.08)); }
body[data-work-slug="sixrealmsofreincarnation"] { --work-bg: #14091e; --work-ink: #fff7dd; --work-soft-ink: rgba(255, 247, 221, 0.74); --work-muted-ink: rgba(218, 194, 151, 0.56); --work-accent: #c69bff; --work-accent-2: #e0ad38; --work-border: rgba(198, 155, 255, 0.28); --work-panel-bg: rgba(28, 13, 43, 0.78); --work-card-bg: rgba(19, 8, 30, 0.92); --work-readout-bg: rgba(29, 13, 45, 0.92); --work-display-font: "Tilt Prism", "Instrument Serif", "Palatino Linotype", Palatino, Georgia, "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.03em; --work-title-word-spacing: 0.03em; --work-title-stance: rotate(0.5deg); --work-title-first-size: 1.06em; --work-world-primary-stance: rotate(-0.8deg); --work-motif-opacity: 0.08; --work-field-opacity: 0.1; --work-scheme: dark; --work-image-filter: saturate(0.9) contrast(1.03); --work-copy-max: 980px; --work-copy-margin: 0 auto; --work-copy-align: center; --work-copy-justify: center; --work-title-max: 12ch; --work-title-margin: 0 auto; --work-title-align: center; --work-body-columns: minmax(0, 1fr); --work-media-padding: clamp(16px, 2.2vw, 32px); --work-image-radius: 50% 50% 18px 18px / 12% 12% 18px 18px; --work-readout-radius: 999px; --work-pagination-columns: repeat(3, minmax(0, 1fr)); --work-title-shadow: 0 0 32px rgba(198, 155, 255, 0.24); --work-title-mark: radial-gradient(circle at 0 50%, #c69bff 0 8px, transparent 9px), linear-gradient(90deg, rgba(196, 138, 27, 0.86), transparent); --work-section-mark: linear-gradient(90deg, #c69bff, #c48a1b, transparent); --work-page-mark: #c48a1b; --work-field: radial-gradient(circle at 50% 16%, rgba(198, 155, 255, 0.18), transparent 18rem),
    radial-gradient(circle at 84% 82%, rgba(196, 138, 27, 0.14), transparent 19rem); --work-motif: repeating-radial-gradient(circle at 50% 50%, rgba(110, 68, 180, 0.16) 0 1px, transparent 1px 32px); }
body[data-work-slug="newworldnewmeta"] { --work-bg: #04121f; --work-ink: #e9fcff; --work-soft-ink: rgba(233, 252, 255, 0.72); --work-muted-ink: rgba(134, 194, 212, 0.58); --work-accent: #48f1ff; --work-accent-2: #8d7cff; --work-border: rgba(72, 241, 255, 0.26); --work-panel-bg: rgba(5, 23, 40, 0.78); --work-card-bg: rgba(3, 17, 31, 0.92); --work-readout-bg: rgba(5, 22, 38, 0.92); --work-display-font: "Unbounded", "Spline Sans Mono", "IBM Plex Mono", "Lucida Console", "Microsoft YaHei UI", Consolas, monospace; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 900; --work-title-letter-spacing: -0.04em; --work-title-word-spacing: -0.02em; --work-title-stance: skewX(-5deg); --work-world-title-stance: skewX(4deg); --work-motif-opacity: 0.09; --work-field-opacity: 0.1; --work-scheme: dark; --work-archive-filter: grayscale(0.24) contrast(1.04) hue-rotate(10deg) brightness(1.08); --work-image-filter: saturate(1.02) contrast(1.04); --work-copy-max: 1040px; --work-title-max: 12ch; --work-title-size: clamp(3.6rem, 7.2vw, 8.4rem); --work-body-columns: minmax(300px, 0.36fr) minmax(0, 0.64fr); --work-border-width: 1px; --work-media-padding: 10px; --work-image-radius: 0 36px 0 36px; --work-readout-radius: 0 0 0 36px; --work-title-shadow: 0 0 28px rgba(72, 241, 255, 0.22); --work-title-mark: linear-gradient(90deg, #48f1ff, #5d4dff, transparent); --work-section-mark: linear-gradient(90deg, #48f1ff, transparent 24%, #5d4dff 26%, transparent 70%); --work-media-outline: 1px solid rgba(93, 77, 255, 0.18); --work-media-outline-offset: 5px; --work-page-mark: linear-gradient(90deg, #48f1ff, #5d4dff); --work-motif: linear-gradient(90deg, rgba(72, 241, 255, 0.12) 0 2px, transparent 2px 48px),
    linear-gradient(180deg, rgba(93, 77, 255, 0.12) 0 2px, transparent 2px 48px); }
body[data-work-slug="ahundredvarietiesoflife"] { --work-bg: #f8fff5; --work-ink: #122313; --work-soft-ink: rgba(18, 35, 19, 0.74); --work-muted-ink: rgba(18, 35, 19, 0.5); --work-accent: #5fd36a; --work-accent-2: #8464ff; --work-border: rgba(95, 211, 106, 0.24); --work-panel-bg: rgba(248, 255, 245, 0.82); --work-card-bg: rgba(252, 255, 250, 0.94); --work-readout-bg: rgba(244, 255, 241, 0.92); --work-display-font: "Syne", "Instrument Serif", "Palatino Linotype", Georgia, "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Microsoft YaHei UI", monospace; --work-title-weight: 800; --work-title-letter-spacing: -0.05em; --work-title-word-spacing: 0.02em; --work-title-stance: rotate(-0.5deg); --work-title-first-size: 1.06em; --work-world-primary-stance: rotate(0.6deg); --work-motif-opacity: 0.1; --work-image-filter: saturate(1.08) contrast(1.02); --work-copy-max: 960px; --work-title-max: 12ch; --work-body-columns: minmax(0, 0.64fr) minmax(290px, 0.36fr); --work-media-padding: clamp(18px, 2vw, 30px); --work-image-radius: 28px 8px 28px 8px; --work-readout-radius: 28px 8px; --work-caption-align: center; --work-title-shadow: 0 16px 30px rgba(95, 211, 106, 0.14); --work-title-mark: linear-gradient(90deg, #5fd36a, #8464ff, transparent); --work-section-mark: repeating-linear-gradient(120deg, rgba(95, 211, 106, 0.7) 0 1px, transparent 1px 10px); --work-page-mark: linear-gradient(90deg, #5fd36a, #8464ff); --work-field: radial-gradient(ellipse at 20% 18%, rgba(95, 211, 106, 0.16), transparent 18rem),
    radial-gradient(ellipse at 86% 70%, rgba(132, 100, 255, 0.12), transparent 18rem); --work-motif: repeating-linear-gradient(115deg, rgba(95, 211, 106, 0.11) 0 1px, transparent 1px 22px); }
body[data-work-slug="thepatient"] { --work-bg: #e7ece9; --work-ink: #15211e; --work-soft-ink: rgba(21, 33, 30, 0.78); --work-muted-ink: rgba(21, 33, 30, 0.52); --work-accent: #2f6f5e; --work-accent-2: #e13b2f; --work-border: rgba(21, 33, 30, 0.22); --work-panel-bg: rgba(238, 241, 238, 0.9); --work-card-bg: rgba(248, 250, 247, 0.96); --work-readout-bg: rgba(232, 236, 232, 0.96); --work-display-font: "Archivo Black", "Dela Gothic One", "Arial Black", "Microsoft YaHei UI", sans-serif; --work-text-font: "IBM Plex Mono", "Spline Sans Mono", "Microsoft YaHei", "Noto Sans SC", monospace; --work-code-font: "IBM Plex Mono", Consolas, monospace; --work-title-weight: 900; --work-title-letter-spacing: -0.045em; --work-title-word-spacing: -0.02em; --work-title-stance: none; --work-world-title-stance: none; --work-world-primary-stance: none; --work-motif-opacity: 0.18; --work-label-letter-spacing: 0.08em; --work-image-filter: grayscale(0.28) contrast(1.04) saturate(0.72) brightness(1.02); --work-copy-max: 980px; --work-title-max: 10ch; --work-title-size: clamp(4.2rem, 8vw, 9.4rem); --work-title-transform: uppercase; --work-body-columns: minmax(0, 0.5fr) minmax(320px, 0.5fr); --work-border-width: 1px; --work-media-padding: 10px; --work-image-radius: 0; --work-readout-transform: uppercase; --work-pagination-height: 124px; --work-title-mark-height: 6px; --work-title-mark: linear-gradient(90deg, #8af2ff, #a6ff00 52%, transparent); --work-title-shadow: 1px 1px 0 #ffffff, 6px 6px 0 rgba(47, 111, 94, 0.18); --work-section-mark: repeating-linear-gradient(90deg, rgba(21, 33, 30, 0.42) 0 1px, transparent 1px 54px, rgba(225, 59, 47, 0.7) 54px 58px, transparent 58px 72px); --work-border-style: solid; --work-page-mark: #e13b2f; --work-panel-shadow: 0 18px 40px rgba(21, 33, 30, 0.1); --work-motif-size: 86px 28px; --work-motif: linear-gradient(90deg, rgba(21, 33, 30, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21, 33, 30, 0.08) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(225, 59, 47, 0.1) 25px 28px); }
body[data-work-slug="thefuneral"] { --work-bg: #030713; --work-ink: #e8fbff; --work-soft-ink: rgba(232, 251, 255, 0.76); --work-muted-ink: rgba(142, 197, 216, 0.58); --work-accent: #45f4ff; --work-accent-2: #b867ff; --work-border: rgba(69, 244, 255, 0.3); --work-panel-bg: rgba(5, 13, 31, 0.78); --work-card-bg: rgba(2, 7, 19, 0.94); --work-readout-bg: rgba(5, 14, 33, 0.94); --work-display-font: "Orbitron", "Unbounded", "Microsoft YaHei UI", sans-serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", "Microsoft YaHei UI", monospace; --work-title-weight: 900; --work-title-letter-spacing: -0.055em; --work-title-word-spacing: 0.01em; --work-title-stance: skewX(-5deg); --work-title-transform: uppercase; --work-title-first-size: 1.04em; --work-world-title-stance: skewX(4deg); --work-world-primary-stance: rotate(-0.4deg) skewX(-4deg); --work-motif-opacity: 0.16; --work-field-opacity: 0.2; --work-radius: 2px; --work-archive-filter: none; --work-image-filter: none; --work-copy-max: 1120px; --work-copy-margin: 0; --work-copy-align: left; --work-copy-justify: flex-start; --work-title-max: 9ch; --work-title-size: clamp(5.2rem, 10.8vw, 13.2rem); --work-title-line-height: 0.82; --work-title-margin: 0; --work-title-align: left; --work-body-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr); --work-panel-shadow: 0 0 0 1px rgba(69, 244, 255, 0.12), 0 32px 90px rgba(0, 0, 0, 0.52), inset 0 0 36px rgba(69, 244, 255, 0.05); --work-media-padding: clamp(10px, 1.5vw, 18px); --work-image-radius: 2px; --work-readout-radius: 2px; --work-pagination-height: 96px; --work-pagination-columns: repeat(3, minmax(0, 1fr)); --work-title-stroke: 0 transparent; --work-title-mark-width: min(100%, 760px); --work-title-mark-height: 1px; --work-title-shadow: -3px 0 0 rgba(69, 244, 255, 0.44), 5px 10px 0 rgba(184, 103, 255, 0.28), 0 0 72px rgba(69, 244, 255, 0.28); --work-title-mark: linear-gradient(90deg, #45f4ff, #b867ff, transparent); --work-section-mark: linear-gradient(90deg, #45f4ff, #b867ff, transparent); --work-border-style: solid; --work-page-mark: #45f4ff; --work-field: radial-gradient(circle at 84% 14%, rgba(69, 244, 255, 0.18), transparent 18rem),
    radial-gradient(circle at 20% 82%, rgba(184, 103, 255, 0.14), transparent 22rem); --work-motif: linear-gradient(90deg, rgba(69, 244, 255, 0.11) 1px, transparent 1px),
    linear-gradient(180deg, rgba(69, 244, 255, 0.09) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(184, 103, 255, 0.08) 0 1px, transparent 1px 34px); --work-motif-size: 54px 54px, 54px 54px, auto; }
body[data-work-slug="thefuneral"] .project-hero { grid-template-columns: minmax(0px, 1fr); align-items: end; min-height: 88svh; padding-bottom: clamp(42px, 8vw, 96px); }
body[data-work-slug="thefuneral"] .project-lede { max-width: 52ch; margin-top: clamp(28px, 4vw, 52px); font-size: clamp(1.05rem, 1.5vw, 1.36rem); }
body[data-work-slug="thefuneral"] .project-cover img, body[data-work-slug="thefuneral"] .media-card img { filter: none; }
body[data-work-slug="thejourney"] { --work-bg: #03120d; --work-ink: #ecffe6; --work-soft-ink: rgba(236, 255, 230, 0.76); --work-muted-ink: rgba(167, 209, 174, 0.58); --work-accent: #69ff8f; --work-accent-2: #64d9ff; --work-border: rgba(105, 255, 143, 0.28); --work-panel-bg: rgba(5, 30, 20, 0.78); --work-card-bg: rgba(4, 22, 15, 0.92); --work-readout-bg: rgba(6, 32, 22, 0.92); --work-display-font: "Tilt Prism", "Syne", "Instrument Serif", "Noto Serif SC", serif; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; --work-code-font: "Spline Sans Mono", "IBM Plex Mono", Consolas, monospace; --work-title-weight: 400; --work-title-style: normal; --work-title-letter-spacing: -0.025em; --work-title-word-spacing: 0.02em; --work-title-stance: rotate(-0.5deg); --work-world-title-stance: rotate(0.4deg); --work-world-primary-stance: rotate(0.6deg) skewX(-2deg); --work-motif-opacity: 0.16; --work-field-opacity: 0.22; --work-scheme: dark; --work-image-filter: saturate(1.1) contrast(1.02) brightness(0.92); --work-copy-max: 980px; --work-title-max: 10ch; --work-body-columns: minmax(290px, 0.32fr) minmax(0, 0.68fr); --work-media-padding: clamp(10px, 1.5vw, 20px); --work-image-radius: 46px 12px 46px 12px; --work-readout-radius: 46px 12px; --work-caption-align: right; --work-title-shadow: 0 0 32px rgba(105, 255, 143, 0.22), -3px 4px 0 rgba(100, 217, 255, 0.16), 0 34px 72px rgba(0, 0, 0, 0.42); --work-title-mark: linear-gradient(90deg, #ecffe6 0 16%, #69ff8f 16% 58%, #64d9ff 58% 68%, transparent 68%); --work-section-mark: linear-gradient(90deg, rgba(105, 255, 143, 0.82), rgba(100, 217, 255, 0.64), transparent); --work-media-outline: 1px solid rgba(105, 255, 143, 0.26); --work-media-outline-offset: 7px; --work-page-mark: #64d9ff; --work-field: radial-gradient(circle at 78% 16%, rgba(100, 217, 255, 0.16), transparent 20rem),
    radial-gradient(circle at 18% 86%, rgba(105, 255, 143, 0.2), transparent 20rem),
    radial-gradient(ellipse at 50% 100%, rgba(24, 74, 43, 0.44), transparent 38rem); --work-motif: repeating-linear-gradient(150deg, rgba(105, 255, 143, 0.12) 0 1px, transparent 1px 28px),
    radial-gradient(ellipse at 20% 30%, rgba(105, 255, 143, 0.18) 0 1px, transparent 2px 26px),
    linear-gradient(90deg, rgba(100, 217, 255, 0.07) 1px, transparent 1px); --work-motif-size: auto, 80px 52px, 38px 38px; }
body[data-work-slug="kiyomikobayashi"] { --work-bg: #0d0610; --work-ink: #fff2fb; --work-soft-ink: rgba(255, 242, 251, 0.74); --work-muted-ink: rgba(226, 164, 214, 0.58); --work-accent: #ff3fa4; --work-accent-2: #10c9d8; --work-border: rgba(255, 63, 164, 0.32); --work-panel-bg: rgba(25, 8, 29, 0.78); --work-card-bg: rgba(16, 5, 20, 0.92); --work-readout-bg: rgba(26, 8, 31, 0.92); --work-display-font: "DotGothic16", "Rubik Glitch", "Spline Sans Mono", "IBM Plex Mono", "Microsoft YaHei UI", monospace; --work-text-font: "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Arial, sans-serif; --work-code-font: "IBM Plex Mono", "Spline Sans Mono", Consolas, monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.012em; --work-title-word-spacing: 0; --work-title-stance: rotate(0.4deg); --work-title-first-size: 1.04em; --work-world-title-stance: rotate(-0.4deg); --work-world-primary-stance: rotate(-0.6deg); --work-motif-opacity: 0.08; --work-field-opacity: 0.1; --work-scheme: dark; --work-image-filter: saturate(0.96) contrast(1.06) hue-rotate(-4deg); --work-copy-max: 1050px; --work-title-max: 13ch; --work-title-size: clamp(4.2rem, 8.2vw, 9.8rem); --work-body-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr); --work-border-width: 2px; --work-media-padding: 6px; --work-image-radius: 0 0 34px 0; --work-readout-radius: 0 0 34px 0; --work-readout-transform: uppercase; --work-title-shadow: 0 0 18px rgba(255, 63, 164, 0.42), -6px 5px 0 rgba(16, 201, 216, 0.22), 6px -2px 0 rgba(255, 63, 164, 0.18); --work-title-mark-height: 9px; --work-title-mark: repeating-linear-gradient(90deg, #ff3fa4 0 18px, transparent 18px 26px, #10c9d8 26px 36px, transparent 36px 48px); --work-section-mark: repeating-linear-gradient(90deg, #ff3fa4 0 10px, transparent 10px 16px, #10c9d8 16px 22px, transparent 22px 30px); --work-page-mark: linear-gradient(90deg, #ff3fa4, #10c9d8); --work-field: linear-gradient(90deg, rgba(16, 201, 216, 0.12), transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(255, 63, 164, 0.14), transparent 16rem); --work-motif: linear-gradient(120deg, rgba(255, 63, 164, 0.1) 0 1px, transparent 1px 24px),
    linear-gradient(60deg, rgba(16, 201, 216, 0.1) 0 1px, transparent 1px 24px); }
body[data-work-slug="vincent"] { --work-bg: #070707; --work-ink: #f7eee4; --work-soft-ink: rgba(247, 238, 228, 0.76); --work-muted-ink: rgba(199, 179, 160, 0.58); --work-accent: #b8172f; --work-accent-2: #7d8c46; --work-border: rgba(184, 23, 47, 0.36); --work-panel-bg: rgba(13, 12, 11, 0.84); --work-card-bg: rgba(8, 8, 7, 0.94); --work-readout-bg: rgba(14, 13, 12, 0.94); --work-display-font: "Pirata One", "Rye", "Dela Gothic One", "Microsoft YaHei UI", serif; --work-text-font: "IBM Plex Mono", "Spline Sans Mono", "Space Grotesk", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif; --work-code-font: "Rye", "IBM Plex Mono", "Courier New", "Microsoft YaHei UI", monospace; --work-title-weight: 400; --work-title-letter-spacing: -0.012em; --work-title-word-spacing: 0.01em; --work-title-stance: rotate(-1.6deg) skewX(-2deg); --work-title-first-size: 1.08em; --work-world-title-stance: rotate(0.8deg) skewX(-2deg); --work-world-primary-stance: rotate(1.2deg) skewX(-3deg); --work-motif-opacity: 0.13; --work-field-opacity: 0.18; --work-scheme: dark; --work-image-filter: saturate(0.95) contrast(1.12) brightness(0.88); --work-copy-max: 740px; --work-title-max: 8ch; --work-title-size: clamp(6rem, 12.8vw, 15rem); --work-title-line-height: 0.76; --work-body-columns: minmax(0, 0.7fr) minmax(240px, 0.3fr); --work-media-padding: clamp(12px, 1.6vw, 20px); --work-image-radius: 40px; --work-readout-radius: 40px; --work-caption-align: center; --work-title-shadow: -4px 5px 0 rgba(0, 0, 0, 0.9),
    4px 8px 0 rgba(184, 23, 47, 0.54),
    0 30px 70px rgba(184, 23, 47, 0.22); --work-title-mark: linear-gradient(90deg, #ff4fa3, #3b6a39, transparent); --work-section-mark: linear-gradient(90deg, #b8172f, rgba(125, 140, 70, 0.62), transparent); --work-page-mark: #b8172f; --work-label-letter-spacing: 0.16em; --work-field: radial-gradient(circle at 18% 16%, rgba(184, 23, 47, 0.22), transparent 16rem),
    radial-gradient(circle at 86% 78%, rgba(125, 140, 70, 0.12), transparent 18rem),
    linear-gradient(135deg, rgba(247, 238, 228, 0.04), transparent 32%); --work-motif: repeating-linear-gradient(90deg, rgba(247, 238, 228, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(184, 23, 47, 0.1) 0 1px, transparent 1px 16px); }
body[data-work-slug="vincent"] .project-lede, body[data-work-slug="vincent"] .project-statement p, body[data-work-slug="vincent"] .project-chinese p { letter-spacing: 0.01em; }
body[data-work-slug="vincent"] .project-title > span { filter: drop-shadow(rgba(184, 23, 47, 0.2) 0px 0px 18px); }
body[data-work-slug="vincent"] .project-copy, body[data-work-slug="vincent"] .project-statement, body[data-work-slug="vincent"] .project-facts, body[data-work-slug="vincent"] .project-world, body[data-work-slug="vincent"] .project-cover, body[data-work-slug="vincent"] .media-card { border-color: rgba(184, 23, 47, 0.44); background: linear-gradient(135deg, rgba(184, 23, 47, 0.12), transparent 34%), linear-gradient(rgba(247, 238, 228, 0.043), transparent 40%), rgba(8, 8, 7, 0.94); box-shadow: rgba(247, 238, 228, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.58) 0px 34px 90px, rgba(184, 23, 47, 0.08) 0px 0px 34px inset; }
body[data-work-slug="vincent"] .project-copy { position: relative; padding: clamp(28px, 3.2vw, 42px); }
body[data-work-slug="vincent"] .project-copy::before { content: "KOWLOON CASE FILE / VINCENT"; display: block; width: fit-content; margin-bottom: clamp(18px, 2.2vw, 30px); padding: 7px 10px; border: 1px solid rgba(184, 23, 47, 0.58); color: rgb(247, 238, 228); background: rgba(184, 23, 47, 0.86); font-family: var(--work-code-font); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-1.2deg); }
body[data-work-slug="vincent"] .project-copy::after { content: "NO WITNESS"; position: absolute; right: clamp(18px, 3vw, 38px); bottom: clamp(18px, 3vw, 34px); padding: 6px 10px; border: 2px solid rgba(184, 23, 47, 0.62); color: rgba(184, 23, 47, 0.72); font-family: var(--work-code-font); font-size: clamp(0.78rem, 1.2vw, 1rem); letter-spacing: 0.14em; transform: rotate(-8deg); }
body[data-work-slug="vincent"] .project-cover-readout, body[data-work-slug="vincent"] .media-card figcaption { background: rgba(14, 13, 12, 0.96); border-color: rgba(184, 23, 47, 0.48); }
body[data-work-slug="thepatient"] .project-copy, body[data-work-slug="thepatient"] .project-statement, body[data-work-slug="thepatient"] .project-facts, body[data-work-slug="thepatient"] .project-world, body[data-work-slug="thepatient"] .project-cover, body[data-work-slug="thepatient"] .media-card, body[data-work-slug="thepatient"] .project-pagination a { background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 72px 28px, 72px 28px, auto; border-color: rgba(21, 33, 30, 0.26); box-shadow: rgba(47, 111, 94, 0.08) 8px 8px 0px, rgba(21, 33, 30, 0.1) 0px 18px 42px; }
body[data-work-slug="thepatient"] .project-copy { position: relative; padding-top: clamp(58px, 6vw, 78px); }
body[data-work-slug="thepatient"] .project-copy::before { content: "TIMESHEET_996.XLS  |  STATUS: OVERTIME"; position: absolute; top: 14px; left: 14px; right: 14px; min-height: 28px; padding: 6px 10px; border: 1px solid rgba(21, 33, 30, 0.28); background: rgb(223, 230, 226); color: rgb(47, 111, 94); font-family: var(--work-code-font); font-size: 0.78rem; line-height: 1.2; text-transform: uppercase; }
body[data-work-slug="thepatient"] .project-title { text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgba(225, 59, 47, 0.16) 8px 8px 0px; }
body[data-work-slug="thepatient"] .fact-row, body[data-work-slug="thepatient"] .project-text-block li { border-bottom-style: dashed; }
body[data-work-slug="thefuneral"] .project-copy, body[data-work-slug="thefuneral"] .project-statement, body[data-work-slug="thefuneral"] .project-facts, body[data-work-slug="thefuneral"] .project-world, body[data-work-slug="thefuneral"] .project-cover, body[data-work-slug="thefuneral"] .media-card, body[data-work-slug="thefuneral"] .project-pagination a { border-color: rgba(69, 244, 255, 0.36); background: linear-gradient(90deg, rgba(69, 244, 255, 0.08) 1px, transparent 1px) 0% 0% / 44px 44px, linear-gradient(rgba(69, 244, 255, 0.06) 1px, transparent 1px) 0% 0% / 44px 44px, radial-gradient(circle at 86% 0%, rgba(184, 103, 255, 0.16), transparent 17rem) 0% 0% / auto,  0% 0% / auto rgba(2, 7, 19, 0.92); box-shadow: rgba(69, 244, 255, 0.12) 0px 0px 0px 1px, rgba(69, 244, 255, 0.08) 0px 0px 54px, rgba(0, 0, 0, 0.6) 0px 34px 100px; }
body[data-work-slug="thefuneral"] .project-copy { position: relative; padding: clamp(30px, 3.5vw, 48px); }
body[data-work-slug="thefuneral"] .project-copy::before { content: "ORBITAL RITUAL INTERFACE / DEATH-TRILOGY MODULE"; display: block; width: fit-content; margin-bottom: clamp(22px, 3vw, 40px); color: var(--work-accent); font-family: var(--work-code-font); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
body[data-work-slug="thefuneral"] .project-title { color: rgb(232, 251, 255); filter: drop-shadow(rgba(69, 244, 255, 0.2) 0px 0px 28px); }
body[data-work-slug="thejourney"] .project-copy, body[data-work-slug="thejourney"] .project-statement, body[data-work-slug="thejourney"] .project-facts, body[data-work-slug="thejourney"] .project-world, body[data-work-slug="thejourney"] .project-cover, body[data-work-slug="thejourney"] .media-card, body[data-work-slug="thejourney"] .project-pagination a { border-color: rgba(105, 255, 143, 0.34); background: radial-gradient(at 20% 0%, rgba(105, 255, 143, 0.14), transparent 18rem), radial-gradient(circle at 92% 12%, rgba(100, 217, 255, 0.1), transparent 14rem), rgba(4, 22, 15, 0.86); box-shadow: rgba(236, 255, 230, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.42) 0px 30px 88px, rgba(105, 255, 143, 0.05) 0px 0px 42px inset; }
body[data-work-slug="thejourney"] .project-copy { position: relative; }
body[data-work-slug="thejourney"] .project-copy::before { content: "BIO-DOME ROUTE / FOREST SIGNAL ONLINE"; display: block; width: fit-content; margin-bottom: clamp(18px, 2.2vw, 32px); color: var(--work-accent); font-family: var(--work-code-font); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
body[data-work-slug="thejourney"] .project-title > span { filter: drop-shadow(rgba(105, 255, 143, 0.28) 0px 0px 20px); }
body[data-work-slug="thejourney"]::after { background: linear-gradient(rgba(3, 18, 13, 0.34), rgba(3, 18, 13, 0.76)), url("/assets/media/axl-media-83cb336f1e356c52.jpg") center center / cover no-repeat, url("/assets/media/axl-media-58c676691c5c113f.jpg") 92% 10% / min(54vw, 680px) no-repeat; opacity: 0.34; mix-blend-mode: normal; }
@media (max-width: 1100px) {
.project-hero, .about-page-hero, .project-body, .about-cv { grid-template-columns: 1fr; }
.project-cover, .project-cover img, .project-cover-fallback { min-height: clamp(430px, 56vw, 520px); }
.project-facts { position: static; }
body[data-work-slug] .project-body, body[data-work-slug] .project-pagination, body[data-work-slug] .project-world { grid-template-columns: 1fr; }
body[data-work-slug] .project-copy { max-width: min(100%, var(--work-copy-max, 1020px)); }
}
@media (max-width: 720px) {
.project-hero, .about-page-hero { padding-top: 126px; min-height: auto; }
.project-title { font-size: clamp(2.8rem, 14vw, 5.2rem); }
.project-title.is-long { font-size: clamp(2.1rem, 11.5vw, 4.2rem); }
body[data-work-slug] .project-title { width: 100%; max-width: 100%; font-size: clamp(2.45rem, 12vw, 4.8rem); overflow-wrap: anywhere; }
body[data-work-slug] .project-title.is-long { font-size: clamp(2rem, 10.4vw, 4rem); }
body[data-work-slug="andalusianhorsecaramelo"] .project-title.is-long { font-size: clamp(1.65rem, 8.7vw, 3.35rem); letter-spacing: -0.025em; transform: none; }
body[data-work-slug="metahuman"] .project-copy { width: 100%; max-width: calc(-36px + 100vw); margin-inline: 0px; }
body[data-work-slug="metahuman"] .project-title { max-width: 100%; font-size: clamp(2.2rem, 10.4vw, 3.55rem); letter-spacing: -0.048em; transform: none; }
body[data-work-slug="metahuman"] .project-lede, body[data-work-slug="metahuman"] .meta-line { max-width: 100%; }
.project-lede { font-size: 1rem; line-height: 1.62; }
.project-cover, .project-cover img, .project-cover-fallback { min-height: clamp(320px, 82vw, 430px); }
.media-card, .media-card img { min-height: clamp(220px, 62vw, 280px); }
}
body[data-work-layout] main#project-root { display: grid; gap: var(--work-page-gap, clamp(34px, 6vw, 86px)); }
body[data-work-layout] .site-header { width: min(calc(100% - 32px), var(--work-header-width, 1180px)); border-radius: var(--work-header-radius, 0); background: color-mix(in srgb, var(--work-bg) 78%, transparent); box-shadow: none; }
body[data-work-layout] .project-hero { width: min(100%, var(--work-layout-width, 1480px)); padding-top: var(--work-layout-top, clamp(118px, 8rem, 132px)); padding-bottom: var(--work-hero-bottom, clamp(38px, 5rem, 78px)); }
body[data-work-layout] .project-copy, body[data-work-layout] .project-statement, body[data-work-layout] .project-facts, body[data-work-layout] .project-cover, body[data-work-layout] .media-card, body[data-work-layout] .project-pagination a { backdrop-filter: none; }
body[data-work-layout] .project-statement::before, body[data-work-layout] .project-facts::before { display: var(--work-block-mark-display, block); }
body[data-work-layout] .project-gallery .section-title { grid-template-columns: 1fr; }
body[data-work-layout] .project-gallery .section-title h2 { max-width: 12ch; }
@media (max-width: 1100px) {
body[data-work-layout] .project-hero, body[data-work-layout] .project-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
body[data-work-layout] .site-header { width: calc(100% - 24px); }
body[data-work-layout] .project-hero { padding-top: 124px; padding-bottom: 38px; }
}
body[data-work-slug] main#project-root { overflow: clip; }
body[data-work-slug]:is([data-work-slug="digitaleden"], [data-work-slug="josephsmidnightparty"], [data-work-slug="metahuman"], [data-work-slug="errorcurrency"], [data-work-slug="sixrealmsofreincarnation"], [data-work-slug="newworldnewmeta"], [data-work-slug="thefuneral"], [data-work-slug="kiyomikobayashi"]) .media-card figcaption { display: none; }
body[data-work-slug="digitaleden"] .project-hero { width: 100%; max-width: none; grid-template-columns: 1fr; padding-inline: 0px; gap: 0px; }
body[data-work-slug="digitaleden"] .project-cover { order: -1; max-width: none; border: 0px; border-radius: 0px; box-shadow: none; background: transparent; }
body[data-work-slug="digitaleden"] .project-cover img { width: 100%; }
body[data-work-slug="digitaleden"] .project-copy { width: min(100%, 1180px); margin: clamp(24px, 4rem, 54px) auto 0px; padding-inline: var(--page-pad); border-left: 12px solid var(--work-accent); }
body[data-work-slug="digitaleden"] .media-card { border: 0px; border-radius: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="digitaleden"] .media-card:nth-child(3n+2) { width: min(100%, 820px); margin-left: auto; }
body[data-work-slug="famousbutugly"] .project-title { display: inline-block; padding: 0.05em 0.08em; border: 4px solid rgb(8, 8, 8); box-shadow: rgb(255, 49, 49) 14px 14px 0px; transform: rotate(-1.8deg); }
body[data-work-slug="famousbutugly"] .project-cover { transform: rotate(1.8deg); }
body[data-work-slug="famousbutugly"] .project-statement { column-count: 2; column-gap: clamp(24px, 3rem, 44px); }
body[data-work-slug="famousbutugly"] .project-statement p { break-inside: avoid; margin-bottom: 18px; }
body[data-work-slug="josephsmidnightparty"]::after { background: linear-gradient(135deg, rgba(17, 7, 19, 0.72), rgba(17, 7, 19, 0.86)), url("/assets/media/axl-media-6e3c4bd45ba70b5b.jpg") center center / cover no-repeat; opacity: 0.3; mix-blend-mode: screen; }
body[data-work-slug="josephsmidnightparty"] .project-title { max-width: 7.8ch; transform: rotate(-5deg); }
body[data-work-slug="josephsmidnightparty"] .project-cover { clip-path: polygon(8% 0px, 100% 5%, 92% 100%, 0px 92%); }
body[data-work-slug="josephsmidnightparty"] .media-card:nth-child(2n) { transform: translateX(clamp(-22px, -2rem, -10px)) rotate(-1deg); }
body[data-work-slug="josephsmidnightparty"] .media-card:nth-child(2n+1) { transform: translateX(clamp(10px, 2rem, 28px)) rotate(1deg); }
body[data-work-slug="weliveinthebestera"] { --work-motif-size: 86px 86px; }
body[data-work-slug="weliveinthebestera"] .project-hero { grid-template-columns: minmax(0px, 0.34fr) minmax(0px, 0.66fr); }
body[data-work-slug="weliveinthebestera"] .project-title { max-width: 6.4ch; }
body[data-work-slug="weliveinthebestera"] .project-cover, body[data-work-slug="weliveinthebestera"] .media-card { clip-path: inset(0px round 48px 48px 10px 10px); }
body[data-work-slug="andalusianhorsecaramelo"] { --work-field: radial-gradient(circle at 18% 22%, rgba(196, 109, 46, 0.18), transparent 16rem),
    linear-gradient(115deg, transparent 0 48%, rgba(196, 109, 46, 0.22) 48% 49%, transparent 49%); }
body[data-work-slug="andalusianhorsecaramelo"] .project-hero { grid-template-columns: minmax(0px, 0.58fr) minmax(290px, 0.42fr); }
body[data-work-slug="andalusianhorsecaramelo"] .project-cover { padding: clamp(12px, 1.6rem, 22px); border: 1px solid rgba(196, 109, 46, 0.42); transform: rotate(2deg); }
body[data-work-slug="andalusianhorsecaramelo"] .project-cover::after { content: ""; position: absolute; right: 20px; top: 20px; width: 74px; aspect-ratio: 1 / 1; border: 2px solid rgba(196, 109, 46, 0.52); border-radius: 50%; pointer-events: none; }
body[data-work-slug="proveyouarenotarobot"] .project-hero { align-items: start; }
body[data-work-slug="proveyouarenotarobot"] .project-cover { z-index: 3; margin-top: clamp(20px, 4rem, 64px); }
body[data-work-slug="proveyouarenotarobot"] .media-card:nth-child(2n) { transform: translate(10px, -8px); }
body[data-work-slug="proveyouarenotarobot"] .media-card:nth-child(2n+1) { transform: translate(-8px, 8px); }
body[data-work-slug="21stcenturymonologue"] .project-hero { grid-template-columns: minmax(0px, 1fr); }
body[data-work-slug="21stcenturymonologue"] .project-cover { order: -1; border-block: 16px solid rgba(255, 40, 79, 0.74); }
body[data-work-slug="21stcenturymonologue"] .project-title { max-width: 14ch; }
body[data-work-slug="21stcenturymonologue"] .project-statement { column-count: 2; column-gap: clamp(24px, 3rem, 44px); }
body[data-work-slug="metahuman"] .project-hero { align-content: center; }
body[data-work-slug="metahuman"] .project-cover { width: min(100%, 760px); clip-path: ellipse(48% 42% at 50% 52%); background: radial-gradient(circle, rgba(0, 216, 255, 0.16), transparent 62%); }
body[data-work-slug="metahuman"] .project-title { filter: drop-shadow(rgba(0, 216, 255, 0.24) 0px 0px 24px); }
body[data-work-slug="metahuman"] .media-card:nth-child(3n+1) { width: min(100%, 760px); margin-inline: auto; }
body[data-work-slug="errorcurrency"] .project-hero { border: 4px double rgba(15, 191, 118, 0.54); border-radius: 999px; padding-inline: clamp(28px, 5rem, 90px); }
body[data-work-slug="errorcurrency"] .project-title::before { content: "$100"; display: block; color: var(--work-accent-2); font-family: var(--work-code-font); font-size: 0.22em; line-height: 1; }
body[data-work-slug="errorcurrency"] .project-cover { transform: rotate(-2deg); }
body[data-work-slug="errorcurrency"] .project-statement, body[data-work-slug="errorcurrency"] .project-facts { border-radius: 28px; }
body[data-work-slug="sixrealmsofreincarnation"]::after { background: repeating-radial-gradient(circle at 50% 38%, rgba(198, 155, 255, 0.16) 0px, rgba(198, 155, 255, 0.16) 1px, transparent 1px, transparent 34px), radial-gradient(circle at 50% 38%, rgba(224, 173, 56, 0.16), transparent 24rem); opacity: 0.34; mix-blend-mode: screen; }
body[data-work-slug="sixrealmsofreincarnation"] .project-cover { width: min(100%, 720px); border-radius: 50%; }
body[data-work-slug="sixrealmsofreincarnation"] .project-cover img { border-radius: 50%; }
body[data-work-slug="sixrealmsofreincarnation"] .project-body { width: min(100%, 860px); }
body[data-work-slug="newworldnewmeta"] .project-hero { min-height: 86svh; }
body[data-work-slug="newworldnewmeta"] .project-cover { clip-path: polygon(12% 0px, 88% 0px, 100% 50%, 88% 100%, 12% 100%, 0px 50%); }
body[data-work-slug="newworldnewmeta"] .project-title { max-width: 9ch; transform: skewX(-8deg); }
body[data-work-slug="newworldnewmeta"] .project-statement { border-left: 10px solid var(--work-accent-2); }
body[data-work-slug="ahundredvarietiesoflife"] .project-hero { grid-template-columns: minmax(280px, 0.4fr) minmax(0px, 0.6fr); }
body[data-work-slug="ahundredvarietiesoflife"] .project-copy { border-left: 0px; border-top: 1px solid var(--work-accent); border-bottom: 1px solid var(--work-accent-2); }
body[data-work-slug="ahundredvarietiesoflife"] .project-cover { transform: rotate(-1.2deg); }
body[data-work-slug="ahundredvarietiesoflife"] .media-card:nth-child(4n+1) { width: min(100%, 720px); }
body[data-work-slug="thepatient"] .project-title { font-family: "Archivo Black", "Arial Black", "Microsoft YaHei UI", sans-serif; }
body[data-work-slug="thepatient"] .project-statement p { padding: 10px 12px; border-bottom: 1px dashed rgba(21, 33, 30, 0.28); background: rgba(255, 255, 255, 0.35); }
body[data-work-slug="thepatient"] .project-cover { transform: rotate(0.7deg); }
body[data-work-slug="thefuneral"] .project-hero { grid-template-columns: minmax(0px, 0.38fr) minmax(0px, 0.62fr); }
body[data-work-slug="thefuneral"] .project-cover { clip-path: inset(0px round 160px 160px 18px 18px); }
body[data-work-slug="thefuneral"] .project-copy { border-left: 1px solid rgba(69, 244, 255, 0.42); }
body[data-work-slug="thejourney"] .project-hero { grid-template-columns: minmax(0px, 0.52fr) minmax(0px, 0.48fr); }
body[data-work-slug="thejourney"] .project-title { max-width: 8.8ch; }
body[data-work-slug="thejourney"] .project-cover { clip-path: polygon(0px 8%, 100% 0px, 96% 100%, 5% 94%); }
body[data-work-slug="thejourney"] .media-card:nth-child(3n+1) { border-radius: 52px 12px; }
body[data-work-slug="kiyomikobayashi"] .project-hero { grid-template-columns: minmax(0px, 0.5fr) minmax(0px, 0.5fr); }
body[data-work-slug="kiyomikobayashi"] .project-cover { clip-path: polygon(0px 0px, 31% 0px, 31% 100%, 36% 100%, 36% 0px, 64% 0px, 64% 100%, 69% 100%, 69% 0px, 100% 0px, 100% 100%, 0px 100%); }
body[data-work-slug="kiyomikobayashi"] .media-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
body[data-work-slug="vincent"] .project-hero { position: relative; }
body[data-work-slug="vincent"] .project-hero::after { content: ""; position: absolute; right: var(--page-pad); top: 18%; width: min(34vw, 360px); height: 2px; background: var(--work-accent); transform: rotate(-18deg); box-shadow: rgba(184, 23, 47, 0.42) 0px 0px 30px; pointer-events: none; }
body[data-work-slug="vincent"] .project-title { transform: rotate(-3deg) skewX(-3deg); }
body[data-work-slug="vincent"] .project-cover { transform: rotate(-2.4deg) translateY(18px); }
@media (min-width: 900px) {
body[data-work-slug="famousbutugly"] .project-hero, body[data-work-slug="weliveinthebestera"] .project-hero, body[data-work-slug="andalusianhorsecaramelo"] .project-hero, body[data-work-slug="thefuneral"] .project-hero, body[data-work-slug="thejourney"] .project-hero, body[data-work-slug="kiyomikobayashi"] .project-hero, body[data-work-slug="ahundredvarietiesoflife"] .project-hero { grid-template-columns: var(--work-odd-hero-columns, inherit); }
body[data-work-slug="famousbutugly"] { --work-odd-hero-columns: minmax(0, 0.62fr) minmax(270px, 0.38fr); }
body[data-work-slug="weliveinthebestera"] { --work-odd-hero-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); }
body[data-work-slug="andalusianhorsecaramelo"] { --work-odd-hero-columns: minmax(0, 0.58fr) minmax(290px, 0.42fr); }
body[data-work-slug="thefuneral"] { --work-odd-hero-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); }
body[data-work-slug="thejourney"] { --work-odd-hero-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); }
body[data-work-slug="kiyomikobayashi"] { --work-odd-hero-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); }
body[data-work-slug="ahundredvarietiesoflife"] { --work-odd-hero-columns: minmax(280px, 0.4fr) minmax(0, 0.6fr); }
}
@media (max-width: 720px) {
body[data-work-slug] .project-title, body[data-work-slug] .project-cover, body[data-work-slug] .media-card { transform: none !important; }
body[data-work-slug="famousbutugly"] .project-statement, body[data-work-slug="21stcenturymonologue"] .project-statement { column-count: 1; }
body[data-work-slug="errorcurrency"] .project-hero { border-radius: 28px; padding-inline: var(--page-pad); }
body[data-work-slug="sixrealmsofreincarnation"] .project-cover, body[data-work-slug="sixrealmsofreincarnation"] .project-cover img { border-radius: 32px; }
body[data-work-slug="kiyomikobayashi"] .media-grid { grid-template-columns: 1fr; }
}
body[data-work-slug] .project-title::after { display: none !important; }
body[data-work-slug] .section-kicker { display: none; }
body[data-work-slug] .project-body { width: min(100%, var(--work-body-width, 1260px)); margin-inline: auto; }
body[data-work-slug] .project-gallery { width: min(100%, var(--work-gallery-width, 1320px)); margin-inline: auto; }
body[data-work-slug] .project-statement, body[data-work-slug] .project-facts, body[data-work-slug] .project-pagination a { background: var(--work-card-bg); }
body[data-work-slug="digitaleden"] { --work-body-width: 1180px; --work-gallery-width: 100%; }
body[data-work-slug="digitaleden"] .project-hero { min-height: 0px; padding-top: 0px; }
body[data-work-slug="digitaleden"] .project-cover { width: 100%; max-width: none; padding: 0px; overflow: hidden; }
body[data-work-slug="digitaleden"] .project-cover::after { content: "DRONE ARCHAEOLOGY / EDEN AFTER THE BUBBLE"; position: absolute; left: 18px; top: 18px; z-index: 2; max-width: 28ch; padding: 10px 12px; border: 1px solid rgba(37, 255, 156, 0.48); background: rgba(3, 20, 14, 0.74); color: rgb(233, 255, 242); font-family: var(--work-code-font); font-size: 0.78rem; line-height: 1.25; }
body[data-work-slug="digitaleden"] .project-copy { margin-top: -72px; padding: 24px; border: 1px solid rgba(37, 255, 156, 0.28); background: rgba(3, 20, 14, 0.9); box-shadow: rgba(0, 0, 0, 0.42) 0px 28px 90px; }
body[data-work-slug="digitaleden"] .project-title { font-size: 6.8rem; }
body[data-work-slug="digitaleden"] .project-body { grid-template-columns: minmax(0px, 0.72fr) minmax(220px, 0.28fr); }
body[data-work-slug="digitaleden"] .media-grid { display: grid; grid-template-columns: minmax(0px, 1fr); width: 100%; max-width: none; }
body[data-work-slug="digitaleden"] .media-card:nth-child(4n+1) { width: 100%; }
body[data-work-slug="digitaleden"] .media-card:nth-child(4n+2), body[data-work-slug="digitaleden"] .media-card:nth-child(4n+3) { width: min(100%, 860px); }
body[data-work-slug="digitaleden"] .media-card:nth-child(4n+4) { width: min(100%, 1060px); margin-left: auto; }
body[data-work-slug="famousbutugly"] .project-hero { grid-template-columns: minmax(0px, 0.68fr) minmax(260px, 0.32fr); align-items: end; }
body[data-work-slug="famousbutugly"] .project-copy { padding: 0px; border: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="famousbutugly"] .project-title { max-width: 8ch; font-size: 8.8rem; line-height: 0.78; word-break: break-word; }
body[data-work-slug="famousbutugly"] .project-lede { max-width: 44ch; padding: 14px 0px; border-block: 4px solid rgb(8, 8, 8); color: rgb(8, 8, 8); font-family: var(--work-code-font); text-transform: uppercase; }
body[data-work-slug="famousbutugly"] .project-cover { padding: 8px; border: 4px solid rgb(8, 8, 8); overflow: hidden; box-shadow: rgb(255, 49, 49) 16px 16px 0px; }
body[data-work-slug="famousbutugly"] .project-statement { border-width: 6px 0px 0px; border-style: solid none none; border-color: rgb(8, 8, 8) currentcolor currentcolor; border-image: none; border-radius: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="famousbutugly"] .project-facts { border: 4px solid rgb(8, 8, 8); border-radius: 0px; box-shadow: rgb(255, 49, 49) 10px 10px 0px; }
body[data-work-slug="josephsmidnightparty"] .project-hero { position: relative; display: block; min-height: 94svh; width: 100%; max-width: none; padding: 0px; overflow: hidden; }
body[data-work-slug="josephsmidnightparty"] .project-cover { position: absolute; inset: 0px; width: 100%; max-width: none; clip-path: none; opacity: 0.74; }
body[data-work-slug="josephsmidnightparty"] .project-cover img { width: 100%; height: 100%; object-fit: cover; }
body[data-work-slug="josephsmidnightparty"] .project-copy { position: relative; z-index: 2; max-width: 760px; min-height: 94svh; display: grid; align-content: end; padding: 150px var(--page-pad) 58px; border: 0px; background: linear-gradient(90deg, rgba(17, 7, 19, 0.92), rgba(17, 7, 19, 0.4), transparent); box-shadow: none; }
body[data-work-slug="josephsmidnightparty"] .project-title { font-size: 7.4rem; line-height: 0.78; }
body[data-work-slug="josephsmidnightparty"] .project-lede { max-width: 36ch; color: rgba(255, 244, 251, 0.86); font-family: var(--work-code-font); }
body[data-work-slug="josephsmidnightparty"] .project-statement { transform: rotate(-1deg); }
body[data-work-slug="josephsmidnightparty"] .project-facts { transform: rotate(1.5deg); }
body[data-work-slug="josephsmidnightparty"] .media-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
body[data-work-slug="weliveinthebestera"] .project-hero { grid-template-columns: minmax(240px, 0.32fr) minmax(0px, 0.68fr); min-height: 86svh; }
body[data-work-slug="weliveinthebestera"] .project-copy { order: 2; align-self: stretch; display: grid; align-content: center; border: 0px; background: radial-gradient(circle at 88% 18%, rgb(215, 255, 0) 0px, rgb(215, 255, 0) 40px, transparent 42px), repeating-linear-gradient(90deg, transparent 0px, transparent 70px, rgba(24, 89, 255, 0.22) 70px, rgba(24, 89, 255, 0.22) 72px), transparent; box-shadow: none; }
body[data-work-slug="weliveinthebestera"] .project-cover { order: 1; aspect-ratio: 1 / 1; align-self: center; border: 14px solid rgb(17, 24, 11); border-radius: 50%; overflow: hidden; box-shadow: rgb(215, 255, 0) 0px 0px 0px 24px, rgb(17, 24, 11) 0px 0px 0px 26px, rgb(24, 89, 255) 20px 20px 0px; }
body[data-work-slug="weliveinthebestera"] .project-cover img { height: 100%; object-fit: cover; }
body[data-work-slug="weliveinthebestera"] .project-title { font-size: 7.6rem; line-height: 0.82; }
body[data-work-slug="weliveinthebestera"] .project-body { grid-template-columns: minmax(220px, 0.3fr) minmax(0px, 0.7fr); }
body[data-work-slug="andalusianhorsecaramelo"] .project-hero { grid-template-columns: minmax(0px, 0.54fr) minmax(280px, 0.46fr); align-items: center; }
body[data-work-slug="andalusianhorsecaramelo"] .project-copy { border-width: 0px 0px 2px 2px; border-style: none none dotted dotted; border-color: currentcolor currentcolor rgb(11, 107, 105) rgb(196, 109, 46); border-image: none; background: rgba(255, 251, 242, 0.7); box-shadow: none; }
body[data-work-slug="andalusianhorsecaramelo"] .project-title { font-size: 5.7rem; line-height: 0.86; }
body[data-work-slug="andalusianhorsecaramelo"] .project-cover { border: 0px; border-radius: 0px; background: rgb(255, 247, 230); overflow: visible; box-shadow: rgba(32, 21, 15, 0.18) 0px 0px 0px 1px, rgba(196, 109, 46, 0.22) 16px 16px 0px; }
body[data-work-slug="andalusianhorsecaramelo"] .project-cover img { transform: rotate(-2deg); }
body[data-work-slug="andalusianhorsecaramelo"] .project-body { grid-template-columns: minmax(0px, 0.52fr) minmax(250px, 0.48fr); }
body[data-work-slug="proveyouarenotarobot"] .project-hero { grid-template-columns: minmax(0px, 0.54fr) minmax(290px, 0.46fr); gap: 14px; }
body[data-work-slug="proveyouarenotarobot"] .project-title { font-size: 5.6rem; line-height: 0.84; }
body[data-work-slug="proveyouarenotarobot"] .project-cover { position: relative; top: auto; margin-top: 54px; }
body[data-work-slug="proveyouarenotarobot"] .project-cover::before { content: "Image Challenge"; display: block; position: absolute; left: 6px; right: 6px; top: 6px; z-index: 2; height: 24px; padding: 4px 8px; background: rgb(0, 0, 128); color: rgb(255, 255, 255); font-family: var(--work-text-font); font-size: 0.78rem; font-weight: 700; }
body[data-work-slug="proveyouarenotarobot"] .project-cover img { padding-top: 28px; }
body[data-work-slug="proveyouarenotarobot"] .media-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
body[data-work-slug="21stcenturymonologue"] .project-hero { width: 100%; max-width: none; grid-template-columns: minmax(0px, 1fr); padding-inline: 0px; }
body[data-work-slug="21stcenturymonologue"] .project-cover { order: -1; width: 100%; max-width: none; border: 0px; border-radius: 0px; background: rgb(0, 0, 0); overflow: hidden; }
body[data-work-slug="21stcenturymonologue"] .project-cover img { width: 100%; max-height: 58svh; object-fit: cover; }
body[data-work-slug="21stcenturymonologue"] .project-copy { width: min(100%, 1120px); margin-inline: auto; padding: 24px var(--page-pad); border: 0px; border-block: 5px solid rgb(255, 40, 79); background: transparent; box-shadow: none; }
body[data-work-slug="21stcenturymonologue"] .project-title { max-width: none; font-size: 6.4rem; }
body[data-work-slug="21stcenturymonologue"] .project-body { grid-template-columns: minmax(0px, 0.58fr) minmax(260px, 0.42fr); }
body[data-work-slug="21stcenturymonologue"] .project-facts { position: relative; }
body[data-work-slug="21stcenturymonologue"] .project-facts::after { content: "ON AIR"; position: absolute; right: 14px; top: 14px; color: rgb(255, 40, 79); font-family: var(--work-code-font); font-weight: 700; }
body[data-work-slug="metahuman"] .project-hero { grid-template-columns: minmax(0px, 0.48fr) minmax(280px, 0.52fr); text-align: left; }
body[data-work-slug="metahuman"] .project-copy { order: 1; max-width: 620px; margin: 0px; padding: 0px; border: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="metahuman"] .project-cover { order: 2; width: min(100%, 680px); clip-path: ellipse(42% 48% at 50% 50%); overflow: hidden; }
body[data-work-slug="metahuman"] .project-cover img { height: 74svh; object-fit: cover; }
body[data-work-slug="metahuman"] .project-title { margin: 0px; max-width: 10ch; font-size: 7.2rem; text-align: left; }
body[data-work-slug="metahuman"] .project-lede { max-width: 42ch; }
body[data-work-slug="metahuman"] .project-body { grid-template-columns: minmax(0px, 1fr); }
body[data-work-slug="metahuman"] .project-statement { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
body[data-work-slug="errorcurrency"] .project-hero { min-height: 82svh; border-radius: 36px; grid-template-columns: minmax(0px, 0.42fr) minmax(0px, 0.58fr); background: radial-gradient(transparent 0px, transparent 44%, rgba(15, 191, 118, 0.15) 45%, rgba(15, 191, 118, 0.15) 46%, transparent 47%), rgba(4, 24, 16, 0.48); }
body[data-work-slug="errorcurrency"] .project-title { font-size: 7rem; line-height: 0.86; }
body[data-work-slug="errorcurrency"] .project-cover { padding: 18px; border: 4px double rgb(15, 191, 118); border-radius: 999px; overflow: hidden; }
body[data-work-slug="errorcurrency"] .project-body { grid-template-columns: minmax(0px, 0.45fr) minmax(270px, 0.55fr); }
body[data-work-slug="errorcurrency"] .project-statement p:first-of-type::first-letter { float: left; margin: 0.08em 0.12em 0px 0px; color: rgb(255, 64, 86); font-family: var(--work-display-font); font-size: 4.6rem; line-height: 0.8; }
body[data-work-slug="sixrealmsofreincarnation"] .project-hero { grid-template-columns: minmax(0px, 1fr); text-align: center; }
body[data-work-slug="sixrealmsofreincarnation"] .project-cover { order: 1; width: min(100%, 620px); aspect-ratio: 1 / 1; border: 2px solid rgba(198, 155, 255, 0.54); border-radius: 50%; overflow: hidden; box-shadow: rgba(224, 173, 56, 0.08) 0px 0px 0px 18px, rgba(198, 155, 255, 0.06) 0px 0px 0px 36px, rgba(198, 155, 255, 0.24) 0px 0px 92px; }
body[data-work-slug="sixrealmsofreincarnation"] .project-cover img { height: 100%; object-fit: cover; }
body[data-work-slug="sixrealmsofreincarnation"] .project-copy { order: 2; max-width: 900px; margin-inline: auto; }
body[data-work-slug="sixrealmsofreincarnation"] .project-title { font-size: 6.6rem; }
body[data-work-slug="sixrealmsofreincarnation"] .project-body { grid-template-columns: minmax(0px, 1fr); }
body[data-work-slug="sixrealmsofreincarnation"] .project-facts { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
body[data-work-slug="newworldnewmeta"] .project-hero { min-height: 88svh; grid-template-columns: minmax(0px, 0.38fr) minmax(0px, 0.62fr); align-items: center; }
body[data-work-slug="newworldnewmeta"] .project-copy { padding: 24px; border: 1px solid rgba(72, 241, 255, 0.34); background: rgba(4, 18, 31, 0.58); }
body[data-work-slug="newworldnewmeta"] .project-title { font-size: 6.2rem; }
body[data-work-slug="newworldnewmeta"] .project-cover { clip-path: polygon(50% 0px, 100% 18%, 88% 100%, 12% 100%, 0px 18%); overflow: hidden; }
body[data-work-slug="newworldnewmeta"] .project-body { grid-template-columns: minmax(280px, 0.34fr) minmax(0px, 0.66fr); }
body[data-work-slug="newworldnewmeta"] .project-statement { border-left: 0px; border-top: 12px solid rgb(141, 124, 255); }
body[data-work-slug="ahundredvarietiesoflife"] .project-hero { grid-template-columns: minmax(280px, 0.42fr) minmax(0px, 0.58fr); }
body[data-work-slug="ahundredvarietiesoflife"] .project-copy { order: 2; border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(95, 211, 106); border-image: none; background: transparent; box-shadow: none; }
body[data-work-slug="ahundredvarietiesoflife"] .project-cover { order: 1; padding: 18px; border: 1px solid rgba(18, 35, 19, 0.18); background: rgb(255, 254, 247); overflow: hidden; transform: rotate(-2deg); }
body[data-work-slug="ahundredvarietiesoflife"] .project-cover::after { content: "SPECIMEN"; position: absolute; right: 18px; bottom: 18px; padding: 8px 12px; border: 1px solid rgba(18, 35, 19, 0.24); color: rgba(18, 35, 19, 0.62); font-family: var(--work-code-font); letter-spacing: 0.14em; }
body[data-work-slug="ahundredvarietiesoflife"] .project-title { font-size: 6.2rem; }
body[data-work-slug="ahundredvarietiesoflife"] .project-body { grid-template-columns: minmax(220px, 0.26fr) minmax(0px, 0.74fr); }
body[data-work-slug="thepatient"] .project-hero { grid-template-columns: minmax(0px, 0.58fr) minmax(300px, 0.42fr); gap: 0px; border: 1px solid rgba(21, 33, 30, 0.24); background: linear-gradient(90deg, rgba(47, 111, 94, 0.09) 1px, transparent 1px) 0% 0% / 96px 32px, linear-gradient(rgba(47, 111, 94, 0.12) 1px, transparent 1px), rgb(238, 242, 238); }
body[data-work-slug="thepatient"] .project-copy { border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgba(21, 33, 30, 0.2) currentcolor currentcolor; border-image: none; border-radius: 0px; box-shadow: none; }
body[data-work-slug="thepatient"] .project-cover { border: 0px; border-radius: 0px; box-shadow: none; transform: none; }
body[data-work-slug="thepatient"] .project-title { font-size: 7.2rem; }
body[data-work-slug="thepatient"] .project-lede { max-width: 50ch; padding: 10px 12px; border: 1px solid rgba(21, 33, 30, 0.24); background: rgba(255, 255, 255, 0.66); }
body[data-work-slug="thepatient"] .project-body { grid-template-columns: minmax(0px, 0.66fr) minmax(240px, 0.34fr); }
body[data-work-slug="thepatient"] .project-statement p::before { content: "CELL "; color: rgb(225, 59, 47); font-weight: 700; }
body[data-work-slug="thefuneral"] .project-hero { grid-template-columns: minmax(0px, 0.4fr) minmax(0px, 0.6fr); min-height: 92svh; align-items: center; }
body[data-work-slug="thefuneral"] .project-copy { z-index: 2; border: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="thefuneral"] .project-title { font-size: 8.4rem; line-height: 0.78; }
body[data-work-slug="thefuneral"] .project-cover { border: 1px solid rgba(69, 244, 255, 0.34); border-radius: 220px 220px 18px 18px; clip-path: none; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset, rgba(69, 244, 255, 0.12) 0px 0px 72px; }
body[data-work-slug="thefuneral"] .project-cover::after { content: "CRYO SERVICE / DEPARTURE MODULE"; position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; padding-top: 12px; border-top: 1px solid rgba(69, 244, 255, 0.42); color: rgba(232, 251, 255, 0.72); font-family: var(--work-code-font); font-size: 0.78rem; letter-spacing: 0.16em; }
body[data-work-slug="thefuneral"] .project-body { grid-template-columns: minmax(0px, 0.48fr) minmax(260px, 0.52fr); }
body[data-work-slug="thefuneral"] .project-statement { border: 1px solid rgba(69, 244, 255, 0.32); border-radius: 999px 999px 12px 12px; padding: 54px 42px 42px; }
body[data-work-slug="thejourney"] .project-hero { position: relative; grid-template-columns: minmax(0px, 0.46fr) minmax(0px, 0.54fr); align-items: end; min-height: 92svh; }
body[data-work-slug="thejourney"] .project-copy { z-index: 2; align-self: center; padding: 0px; border: 0px; background: transparent; box-shadow: none; }
body[data-work-slug="thejourney"] .project-title { font-size: 7.8rem; }
body[data-work-slug="thejourney"] .project-cover { border: 0px; border-radius: 0px; clip-path: polygon(6% 0px, 100% 12%, 91% 100%, 0px 82%); overflow: hidden; box-shadow: rgba(105, 255, 143, 0.24) 0px 0px 0px 1px, rgba(0, 0, 0, 0.55) 0px 44px 120px; }
body[data-work-slug="thejourney"] .project-cover img { height: 72svh; object-fit: cover; }
body[data-work-slug="thejourney"] .project-body { grid-template-columns: minmax(230px, 0.28fr) minmax(0px, 0.72fr); }
body[data-work-slug="thejourney"] .project-facts { border-radius: 999px 999px 8px 8px; }
body[data-work-slug="thejourney"] .media-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); }
body[data-work-slug="kiyomikobayashi"] .project-hero { grid-template-columns: minmax(0px, 0.62fr) minmax(280px, 0.38fr); align-items: end; min-height: 90svh; }
body[data-work-slug="kiyomikobayashi"] .project-copy { align-self: center; padding: 0px 0px 0px 28px; border-width: 0px 0px 0px 2px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(255, 63, 164); border-image: none; background: transparent; box-shadow: none; }
body[data-work-slug="kiyomikobayashi"] .project-title { max-width: 8.5ch; font-size: 6.8rem; line-height: 0.82; }
body[data-work-slug="kiyomikobayashi"] .project-cover { clip-path: polygon(0px 0px, 100% 0px, 100% 82%, 82% 100%, 0px 100%); overflow: hidden; }
body[data-work-slug="kiyomikobayashi"] .project-cover::before { content: "MEMORY / MASK / SWORD"; display: block; position: absolute; left: 14px; top: 14px; z-index: 2; padding: 8px 10px; border: 1px solid rgba(16, 201, 216, 0.72); background: rgba(13, 6, 16, 0.72); color: rgb(255, 242, 251); font-family: var(--work-code-font); font-size: 0.76rem; letter-spacing: 0.12em; }
body[data-work-slug="kiyomikobayashi"] .project-body { grid-template-columns: minmax(0px, 0.58fr) minmax(240px, 0.42fr); }
body[data-work-slug="kiyomikobayashi"] .project-statement { border-left: 8px solid rgb(255, 63, 164); }
body[data-work-slug="vincent"] .project-hero { grid-template-columns: minmax(0px, 0.48fr) minmax(300px, 0.52fr); min-height: 90svh; }
body[data-work-slug="vincent"] .project-copy { align-self: end; border-width: 0px 0px 0px 8px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(184, 23, 47); border-image: none; background: rgba(8, 8, 7, 0.86); }
body[data-work-slug="vincent"] .project-title { font-size: 12rem; line-height: 0.68; }
body[data-work-slug="vincent"] .project-lede { max-width: 34ch; color: rgba(247, 238, 228, 0.82); }
body[data-work-slug="vincent"] .project-cover { align-self: center; border: 0px; border-radius: 0px; overflow: hidden; clip-path: polygon(0px 8%, 92% 0px, 100% 100%, 8% 90%); }
body[data-work-slug="vincent"] .project-cover::before { content: "WANTED / FLOOR UNKNOWN"; display: block; position: absolute; left: 18px; top: 18px; z-index: 2; padding: 8px 12px; border: 2px solid rgba(184, 23, 47, 0.72); color: rgb(247, 238, 228); background: rgba(8, 8, 7, 0.82); font-family: var(--work-code-font); font-size: 0.78rem; letter-spacing: 0.12em; }
body[data-work-slug="vincent"] .project-body { grid-template-columns: minmax(0px, 0.42fr) minmax(260px, 0.58fr); }
body[data-work-slug="vincent"] .project-facts { order: -1; border-radius: 0px; transform: rotate(-1deg); }
body[data-work-slug="vincent"] .media-card:nth-child(2n+1) { transform: rotate(-1.5deg); }
body[data-work-slug="vincent"] .media-card:nth-child(2n) { transform: rotate(1.5deg); }
@media (max-width: 1100px) {
body[data-work-slug="josephsmidnightparty"] .media-grid, body[data-work-slug="proveyouarenotarobot"] .media-grid, body[data-work-slug="thejourney"] .media-grid { grid-template-columns: 1fr; }
body[data-work-slug="metahuman"] .project-statement, body[data-work-slug="sixrealmsofreincarnation"] .project-facts { grid-template-columns: 1fr; }
body[data-work-slug="kiyomikobayashi"] .project-hero { grid-template-columns: 1fr; }
body[data-work-slug="kiyomikobayashi"] .project-copy { padding-left: 0px; border-left: 0px; }
}
@media (max-width: 720px) {
body[data-work-slug] .project-title { font-size: 3.4rem !important; line-height: 0.9; }
body[data-work-slug] .project-hero, body[data-work-slug] .project-body { display: grid; min-height: 0px; grid-template-columns: 1fr !important; }
body[data-work-slug] .project-copy { padding: 18px !important; }
body[data-work-slug="josephsmidnightparty"] .project-copy { min-height: 70svh; padding-top: 132px !important; }
body[data-work-slug="josephsmidnightparty"] .project-cover { position: absolute; }
body[data-work-slug="digitaleden"] .project-copy { margin-top: 0px; }
body[data-work-slug="metahuman"] .project-statement, body[data-work-slug="proveyouarenotarobot"] .media-grid, body[data-work-slug="thejourney"] .media-grid { grid-template-columns: 1fr; }
body[data-work-slug="metahuman"] .project-cover img, body[data-work-slug="thejourney"] .project-cover img { height: auto; }
}
body[data-work-layout="room"] { --bg: var(--room-bg); --text: var(--room-ink); --muted: var(--room-muted); --panel: var(--room-panel); --green: var(--room-accent); background: var(--room-bg); color: var(--room-ink); }
body[data-work-layout="room"] .site-header { border-color: color-mix(in srgb, var(--room-ink) 18%, transparent); background: color-mix(in srgb, var(--room-bg) 82%, transparent); color: var(--room-ink); }
body[data-work-layout="room"] .brand, body[data-work-layout="room"] .brand small, body[data-work-layout="room"] .nav, body[data-work-layout="room"] .variant-link, body[data-work-layout="room"] .project-back { color: var(--room-ink); }
body[data-work-layout="room"] #project-root { position: relative; z-index: 2; }
.artwork-page { position: relative; display: grid; gap: clamp(48px, 8vw, 132px); padding-bottom: clamp(56px, 9vw, 120px); color: var(--room-ink); isolation: isolate; }
.artwork-page::before { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(circle at var(--room-x, 52%) var(--room-y, 42%), color-mix(in srgb, var(--room-accent) 20%, transparent), transparent 28rem),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--room-bg) 82%, #000 18%)); opacity: 0.72; }
body[data-work-layout="room"] .section { width: min(100% - clamp(28px, 6vw, 92px), 1440px); margin-inline: auto; padding-inline: 0px; }
body[data-work-layout="room"] .project-hero { position: relative; display: grid; grid-template-columns: minmax(0px, 0.44fr) minmax(280px, 0.56fr); gap: clamp(24px, 5vw, 86px); min-height: 92svh; align-items: center; padding-top: clamp(116px, 12vw, 156px); }
body[data-work-layout="room"] .project-copy, body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts, body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .project-pagination a, .artwork-room-interface { border: 1px solid color-mix(in srgb, var(--room-ink) 18%, transparent); border-radius: var(--room-radius, 0); background: var(--room-panel); box-shadow: none; backdrop-filter: blur(10px); }
body[data-work-layout="room"] .project-copy { display: grid; gap: clamp(14px, 2vw, 24px); max-width: 780px; padding: clamp(22px, 4vw, 48px); }
.room-status { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; }
.room-status span { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--room-ink) 22%, transparent); background: color-mix(in srgb, var(--room-panel) 72%, transparent); }
body[data-work-layout="room"] .project-title { max-width: 12ch; margin: 0px; color: var(--room-ink); font-family: var(--work-display-font, "Unbounded", "Space Grotesk", Arial, sans-serif); font-size: clamp(3.8rem, 9vw, 10.4rem); font-weight: 900; line-height: 0.82; letter-spacing: 0px; text-wrap: balance; }
body[data-work-layout="room"] .project-title.is-long { max-width: 15ch; font-size: clamp(3rem, 6.5vw, 7.6rem); }
body[data-work-layout="room"] .project-lede { max-width: 58ch; margin: 0px; color: var(--room-muted); font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.58; }
body[data-work-layout="room"] .project-cover { position: relative; max-width: none; min-height: 0px; overflow: hidden; background: color-mix(in srgb, var(--room-panel) 86%, #000 14%); }
body[data-work-layout="room"] .project-cover-link, body[data-work-layout="room"] .media-card-link { display: block; width: 100%; }
body[data-work-layout="room"] .project-cover img, body[data-work-layout="room"] .media-card img, .room-media-preview img { display: block; width: 100%; height: auto; min-height: 0px; object-fit: contain; filter: none; }
body[data-work-layout="room"] .project-body { display: grid; grid-template-columns: minmax(0px, 0.68fr) minmax(240px, 0.32fr); gap: clamp(20px, 4vw, 54px); align-items: start; }
body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts { padding: clamp(18px, 3vw, 34px); }
body[data-work-layout="room"] .section-kicker, body[data-work-layout="room"] .fact-row span, body[data-work-layout="room"] .section-title p, body[data-work-layout="room"] .media-card figcaption, body[data-work-layout="room"] .project-pagination span { color: var(--room-muted); font-family: var(--mono); }
body[data-work-layout="room"] .project-statement p, body[data-work-layout="room"] .project-text-block li { color: var(--room-muted); font-size: clamp(1rem, 1.28vw, 1.14rem); line-height: 1.78; }
body[data-work-layout="room"] .project-text-block h3, body[data-work-layout="room"] .section-title h2, body[data-work-layout="room"] .fact-row strong, body[data-work-layout="room"] .project-pagination strong { color: var(--room-ink); }
body[data-work-layout="room"] .project-facts { top: 112px; }
body[data-work-layout="room"] .media-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 68px); }
body[data-work-layout="room"] .media-card { position: relative; display: grid; min-height: 0px; overflow: hidden; break-inside: avoid; }
body[data-work-layout="room"] .media-card.is-lit { border-color: var(--room-accent); }
body[data-work-layout="room"] .media-card figcaption { position: static; padding: 12px 14px; background: color-mix(in srgb, var(--room-panel) 86%, transparent); font-size: 0.76rem; }
.room-eden { --work-display-font: "Zen Dots", "Unbounded", sans-serif; }
.room-eden .artwork-room-hero::before, .room-expedition .artwork-room-hero::before { content: ""; position: absolute; inset: 0px; z-index: -1; background-image: linear-gradient(90deg, color-mix(in srgb, var(--room-bg) 52%, transparent), color-mix(in srgb, var(--room-bg) 86%, transparent)),
    var(--room-cover-image); background-size: cover; background-position: center center; opacity: 0.34; filter: grayscale(0.4) contrast(1.1); }
.room-feedback { --work-display-font: "Archivo Black", Impact, sans-serif; }
.room-feedback .project-hero { border-block: 8px solid var(--room-ink); }
.room-feedback .project-title { text-transform: uppercase; }
.room-feedback .project-cover, .room-feedback .media-card { border-width: 4px; box-shadow: calc(10px + var(--press-shift, 0px)) 10px 0 var(--room-accent); }
.room-midnight { --work-display-font: "Rubik Glitch", "Dela Gothic One", sans-serif; }
.room-midnight .project-hero { width: 100%; max-width: none; min-height: 96svh; }
.room-midnight .project-cover { align-self: stretch; transform: rotate(-1deg); }
.room-outlet { --work-display-font: "Climate Crisis", "Archivo Black", sans-serif; }
.room-route { --work-display-font: "Instrument Serif", Georgia, serif; }
.room-captcha { --work-display-font: "DotGothic16", "MS Sans Serif", monospace; --room-radius: 0; }
.room-captcha .project-copy, .room-captcha .project-cover, .room-captcha .artwork-room-interface, .room-captcha .project-statement, .room-captcha .project-facts, .room-captcha .media-card { border-color: rgb(0, 0, 0); box-shadow: rgb(255, 255, 255) 2px 2px inset, rgb(64, 64, 64) -2px -2px inset; }
.room-body-scan { --work-display-font: "Orbitron", "Unbounded", sans-serif; }
.room-body-scan .project-cover { border-radius: 999px; }
.room-currency { --work-display-font: "Rye", "Unbounded", serif; }
.room-currency .project-hero, .room-currency .room-stage { border-radius: 999px; }
.room-mandala { --work-display-font: "Tilt Prism", "Unbounded", sans-serif; }
.room-console { --work-display-font: "Zen Dots", "Unbounded", sans-serif; }
.room-greenhouse { --work-display-font: "Instrument Serif", Georgia, serif; }
.room-greenhouse .room-media-preview, .room-greenhouse .project-cover, .room-greenhouse .media-card { border-radius: 44px 8px; }
.room-clinic { --work-display-font: "IBM Plex Mono", Consolas, monospace; --room-radius: 0; }
.room-clinic .project-hero, .room-clinic .artwork-room-interface, .room-clinic .project-body { background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 96px 32px; }
.room-cryo { --work-display-font: "Orbitron", "Unbounded", sans-serif; }
.room-cryo .project-cover, .room-cryo .media-card { border-color: color-mix(in srgb, var(--room-accent) 38%, transparent); }
.room-cryo .project-cover img, .room-cryo .media-card img, .room-cryo .room-media-preview img { filter: none !important; }
.room-expedition { --work-display-font: "Pirata One", "Instrument Serif", serif; }
.room-expedition .project-cover, .room-expedition .media-card:nth-child(2n+1) { clip-path: polygon(6% 0px, 100% 12%, 91% 100%, 0px 82%); }
.room-dossier { --work-display-font: "Monoton", "Unbounded", sans-serif; }
.room-dossier .project-cover, .room-dossier .media-card { clip-path: polygon(0px 0px, 100% 0px, 100% 84%, 84% 100%, 0px 100%); }
.room-noir { --work-display-font: "Pirata One", "Rye", serif; }
.room-noir .project-title { font-size: clamp(6rem, 15vw, 15rem); }
.room-noir .project-cover, .room-noir .media-card:nth-child(2n) { transform: rotate(-1deg); }
@media (min-width: 980px) {
.room-feedback .project-hero, .room-captcha .project-hero, .room-clinic .project-hero { grid-template-columns: minmax(0px, 0.58fr) minmax(280px, 0.42fr); }
.room-mandala .project-hero, .room-greenhouse .project-hero { grid-template-columns: minmax(280px, 0.38fr) minmax(0px, 0.62fr); }
.room-broadcast .project-hero, .room-console .project-hero { grid-template-columns: 1fr; }
.room-broadcast .project-cover, .room-console .project-cover { order: -1; max-height: 62svh; }
.room-midnight .project-body, .room-noir .project-body, .room-currency .project-body { grid-template-columns: minmax(240px, 0.36fr) minmax(0px, 0.64fr); }
.room-midnight .project-facts, .room-noir .project-facts, .room-currency .project-facts { order: -1; }
.room-feedback .media-grid, .room-route .media-grid, .room-noir .media-grid { display: block; column-count: 2; column-gap: clamp(18px, 3vw, 42px); }
.room-feedback .media-card, .room-route .media-card, .room-noir .media-card { display: inline-grid; width: 100%; margin-bottom: clamp(18px, 3vw, 42px); }
}
@media (max-width: 900px) {
body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-body, .artwork-room-interface, .room-stage { grid-template-columns: 1fr !important; }
body[data-work-layout="room"] .project-hero { min-height: 0px; padding-top: 124px; }
body[data-work-layout="room"] .project-copy { padding: 18px !important; }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long { font-size: clamp(3rem, 14vw, 5.4rem) !important; line-height: 0.88; }
}
@media (max-width: 560px) {
body[data-work-layout="room"] .section { width: min(100% - 24px, 1440px); }
.artwork-room-interface, body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.artwork-page, .artwork-page *, .artwork-page ::before, .artwork-page ::after { animation: auto ease 0s 1 normal none running none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.room-stage::after, .artwork-page::before { opacity: 0.18 !important; }
.room-mandala .room-nodes, .room-noir .project-cover, .room-noir .media-card:nth-child(2n) { transform: none !important; }
}
body[data-work-layout="room"] .project-copy::before, body[data-work-layout="room"] .project-copy::after, body[data-work-layout="room"] .project-cover::before, body[data-work-layout="room"] .project-cover::after, body[data-work-layout="room"] .project-title::before, body[data-work-layout="room"] .project-title::after { content: none !important; display: none !important; }
body[data-work-layout="room"] { --work-display-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif; --work-text-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif; --work-code-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif; --mono: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif; font-family: var(--work-text-font) !important; }
body[data-work-layout="room"] .artwork-page { gap: clamp(34px, 5vw, 76px); padding-bottom: clamp(48px, 7vw, 92px); --work-display-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif !important; --work-text-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif !important; --work-code-font: "Segoe UI", Arial, "Microsoft YaHei", "Noto Sans SC", sans-serif !important; font-family: var(--work-text-font) !important; }
body[data-work-layout="room"] .artwork-page::before { background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center center; opacity: 0.16; filter: saturate(0.7) blur(1px); }
body[data-work-layout="room"] .section { width: min(100% - clamp(24px, 5vw, 72px), 1540px); }
body[data-work-layout="room"] .project-hero { grid-template-columns: minmax(260px, 0.34fr) minmax(0px, 0.66fr); gap: clamp(18px, 3.5vw, 52px); min-height: 0px; padding-top: clamp(112px, 12vw, 152px); align-items: end; }
body[data-work-layout="room"] .project-copy, body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts, body[data-work-layout="room"] .project-pagination a { border-radius: 0px !important; box-shadow: none !important; backdrop-filter: none !important; }
body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .media-card { box-shadow: none !important; backdrop-filter: none !important; }
body[data-work-layout="room"] .project-copy { align-self: end; gap: 12px; padding: 0px; border: 0px !important; background: transparent !important; }
body[data-work-layout="room"] .project-back { width: max-content; padding: 0px; border: 0px; background: transparent; color: var(--room-muted); font-size: 0.82rem; }
body[data-work-layout="room"] .room-status { gap: 6px; color: var(--room-muted); font-size: 0.72rem; letter-spacing: 0px; text-transform: none; font-family: var(--work-text-font) !important; }
body[data-work-layout="room"] .room-status span { padding: 0px; border: 0px; background: transparent; }
body[data-work-layout="room"] .room-status span + span::before { content: "/"; margin-right: 6px; color: color-mix(in srgb, var(--room-muted) 70%, transparent); }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long, body[data-work-layout="room"] .project-title > span, body[data-work-layout="room"] .project-alt-title, body[data-work-layout="room"] .section-title h2, body[data-work-layout="room"] .project-text-block h3, body[data-work-layout="room"] .project-pagination strong { font-family: var(--work-text-font) !important; font-style: normal !important; font-weight: 650 !important; letter-spacing: 0px !important; word-spacing: 0px !important; text-transform: none !important; text-shadow: none !important; -webkit-text-stroke: 0px transparent !important; transform: none !important; clip-path: none !important; filter: none !important; }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long { max-width: 15ch; color: var(--room-ink); text-wrap: balance; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; font-size: clamp(2.4rem, 5.7vw, 6.4rem) !important; line-height: 0.98 !important; }
body[data-work-layout="room"] .project-title > span::first-letter { color: inherit !important; font-size: 1em !important; }
body[data-work-layout="room"] .project-alt-title, body[data-work-layout="room"] .project-lede { max-width: 48ch; color: var(--room-muted); line-height: 1.52; font-size: clamp(0.86rem, 1vw, 1rem) !important; }
body[data-work-layout="room"] .project-cover { align-self: stretch; border: 0px !important; background: transparent !important; }
body[data-work-layout="room"] .project-cover img { width: 100%; max-height: 72svh; object-fit: contain; background: color-mix(in srgb, var(--room-bg) 82%, #000 18%); }
body[data-work-layout="room"] .project-gallery { margin-top: 0px; }
body[data-work-layout="room"] .project-gallery .section-title { margin-bottom: clamp(14px, 2vw, 24px); }
body[data-work-layout="room"] .section-title h2 { color: var(--room-muted); line-height: 1.2; font-size: 0.82rem !important; }
body[data-work-layout="room"] .media-grid, body[data-work-layout="room"] .room-feedback .media-grid, body[data-work-layout="room"] .room-route .media-grid, body[data-work-layout="room"] .room-noir .media-grid, body[data-work-layout="room"] .room-broadcast .media-grid, body[data-work-layout="room"] .room-captcha .media-grid, body[data-work-layout="room"] .room-expedition .media-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: clamp(14px, 2.4vw, 34px); display: grid !important; column-count: initial !important; }
body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .room-feedback .media-card, body[data-work-layout="room"] .room-route .media-card, body[data-work-layout="room"] .room-noir .media-card { grid-column: span 6; display: block !important; width: auto !important; margin: 0px !important; padding: 0px !important; border: 0px !important; background: transparent !important; outline: 0px !important; }
body[data-work-layout="room"] .media-card:nth-child(6n+1), body[data-work-layout="room"] .media-card:nth-child(6n+5) { grid-column: span 7; }
body[data-work-layout="room"] .media-card:nth-child(6n+2), body[data-work-layout="room"] .media-card:nth-child(6n+4) { grid-column: span 5; }
body[data-work-layout="room"] .media-card:nth-child(6n+3), body[data-work-layout="room"] .media-card:nth-child(6n+6) { grid-column: span 12; }
body[data-work-layout="room"] .media-card img { width: 100%; background: color-mix(in srgb, var(--room-bg) 86%, #000 14%); height: auto !important; max-height: none !important; object-fit: contain !important; filter: none !important; }
body[data-work-layout="room"] .media-card figcaption { display: none !important; }
body[data-work-layout="room"] .project-body { grid-template-columns: minmax(0px, 0.64fr) minmax(220px, 0.36fr); gap: clamp(18px, 3vw, 42px); align-items: start; margin-top: clamp(4px, 1.5vw, 18px); }
body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts { padding: clamp(14px, 2vw, 24px) 0px 0px; border-right: 0px !important; border-bottom: 0px !important; border-left: 0px !important; border-image: none !important; border-top: 1px solid color-mix(in srgb, var(--room-ink) 16%, transparent) !important; background: transparent !important; }
body[data-work-layout="room"] .section-kicker, body[data-work-layout="room"] .fact-row span, body[data-work-layout="room"] .project-pagination span, body[data-work-layout="room"] .project-more-text summary { color: var(--room-muted); font-size: 0.74rem; letter-spacing: 0px; text-transform: none; font-family: var(--work-text-font) !important; }
body[data-work-layout="room"] .project-statement p, body[data-work-layout="room"] .project-text-block li { max-width: 68ch; color: var(--room-muted); line-height: 1.62; font-size: clamp(0.86rem, 1vw, 0.98rem) !important; }
body[data-work-layout="room"] .project-statement p + p { margin-top: 0.82em; }
body[data-work-layout="room"] .project-text-block { margin-top: 6px; }
body[data-work-layout="room"] .project-text-block h3 { margin: 0px 0px 8px; color: var(--room-ink); font-size: 0.86rem; }
body[data-work-layout="room"] .project-text-block ul { margin: 0px; }
body[data-work-layout="room"] .project-facts { display: grid; gap: 0px; position: sticky; top: 104px; }
body[data-work-layout="room"] .fact-row { display: grid; grid-template-columns: 8ch minmax(0px, 1fr); gap: 12px; padding: 8px 0px; border-bottom: 1px solid color-mix(in srgb, var(--room-ink) 10%, transparent); }
body[data-work-layout="room"] .fact-row strong { color: var(--room-ink); font-size: 0.82rem; font-weight: 500; }
@media (max-width: 980px) {
body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-body { grid-template-columns: 1fr !important; }
body[data-work-layout="room"] .project-cover-link { display: grid; place-items: center; }
body[data-work-layout="room"] .project-cover img { width: auto; max-width: 100%; max-height: 56svh; }
body[data-work-layout="room"] .project-facts { position: static; }
body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .media-card:nth-child(n) { grid-column: span 12; }
}
@media (max-width: 560px) {
body[data-work-layout="room"] .section { width: min(100% - 22px, 1540px); }
body[data-work-layout="room"] .project-hero { padding-top: 100px; }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long { font-size: clamp(2.1rem, 12vw, 4rem) !important; }
body[data-work-layout="room"] .project-cover img { width: 100%; max-height: 66svh; }
body[data-work-layout="room"] .fact-row { grid-template-columns: 1fr; gap: 2px; }
}
body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .project-cover-link, body[data-work-layout="room"] .project-hero-strip, body[data-work-layout="room"] .project-hero-strip a, body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .media-card-link, body[data-work-layout="room"] .lazy-video { aspect-ratio: auto !important; border-radius: 0px !important; clip-path: none !important; filter: none !important; mask: none !important; transform: none !important; }
body[data-work-layout="room"] .project-cover img, body[data-work-layout="room"] .project-hero-strip img, body[data-work-layout="room"] .media-card img, body[data-work-layout="room"] .lazy-video-poster, body[data-work-layout="room"] .lazy-video-player { display: block; width: 100% !important; height: auto !important; aspect-ratio: auto !important; border-radius: 0px !important; clip-path: none !important; filter: none !important; mask: none !important; object-fit: contain !important; transform: none !important; }
body[data-work-layout="room"] .project-cover::before, body[data-work-layout="room"] .project-cover::after, body[data-work-layout="room"] .media-card::before, body[data-work-layout="room"] .media-card::after { content: none !important; display: none !important; }
body[data-work-layout="room"] .artwork-page::before, body[data-work-layout="room"] .artwork-room-hero::before, body[data-work-layout="room"] .artwork-room-hero::after { content: none !important; display: none !important; background: none !important; filter: none !important; opacity: 0 !important; }
body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-copy, body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .project-body, body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts, body[data-work-layout="room"] .project-gallery, body[data-work-layout="room"] .media-grid, body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .project-pagination, body[data-work-layout="room"] .project-pagination a { border: 0px !important; outline: 0px !important; box-shadow: none !important; }
html.work-document { background: rgb(0, 0, 0); scroll-behavior: auto !important; }
body[data-work-slug] { cursor: auto !important; }
body[data-work-slug] a, body[data-work-slug] button { cursor: pointer !important; }
body[data-work-layout="room"] .site-header { background: rgb(0, 0, 0) !important; backdrop-filter: none !important; }
body[data-work-layout="room"] .responsive-media { display: block; width: 100%; }
body[data-work-layout="room"] .responsive-media img { display: block; width: 100%; height: auto; }
body[data-work-layout="room"] .project-cover .media-credit, body[data-work-layout="room"] .media-card figcaption.media-credit { width: 100%; margin: 9px 0px 0px; padding: 0px; display: block !important; border: 0px !important; color: var(--archive-soft) !important; font: 400 clamp(0.7rem, 0.78vw, 0.78rem) / 1.5 var(--work-text-font) !important; letter-spacing: 0px !important; text-align: left !important; text-transform: none !important; }
body[data-work-layout="room"] .project-hero { grid-template-columns: minmax(280px, 0.42fr) minmax(420px, 0.58fr); align-items: center; }
body[data-work-layout="room"] .project-cover { place-self: center stretch; }
body[data-work-layout="room"] .project-cover-link { display: block !important; }
body[data-work-layout="room"] .project-cover img { max-height: 78svh; background: transparent !important; }
body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts { padding-top: 0px; border-top: 0px !important; }
body[data-work-layout="room"] .project-gallery { margin-top: clamp(16px, 3vw, 42px); }
@media (max-width: 980px) {
body[data-work-layout="room"] .project-hero { grid-template-columns: 1fr !important; }
body[data-work-layout="room"] .project-cover img { max-height: none; }
}
body[data-work-layout="room"] { --archive-bg: #000000 !important; --archive-paper: #000000 !important; --archive-ink: #f2f2f2 !important; --archive-muted: rgba(242, 242, 242, 0.64) !important; --archive-soft: rgba(242, 242, 242, 0.38) !important; --archive-line: rgba(242, 242, 242, 0.18) !important; --room-bg: var(--archive-bg) !important; --room-ink: var(--archive-ink) !important; --room-muted: var(--archive-muted) !important; --room-panel: transparent !important; --room-accent: var(--archive-ink) !important; --room-accent2: var(--archive-soft) !important; --work-title-font: var(--work-text-font) !important; --work-head-font: var(--work-text-font) !important; background: var(--archive-bg) !important; color: var(--archive-ink) !important; }
body[data-work-layout="room"]::before, body[data-work-layout="room"]::after, body[data-work-layout="room"] .artwork-page::before, body[data-work-layout="room"] .artwork-page::after, body[data-work-layout="room"] .artwork-room-hero::before, body[data-work-layout="room"] .artwork-room-hero::after, body[data-work-layout="room"] .project-copy::before, body[data-work-layout="room"] .project-copy::after, body[data-work-layout="room"] .project-title::before, body[data-work-layout="room"] .project-title::after, body[data-work-layout="room"] .project-statement::before, body[data-work-layout="room"] .project-statement::after, body[data-work-layout="room"] .project-statement p::before, body[data-work-layout="room"] .project-statement p::after, body[data-work-layout="room"] .project-facts::before, body[data-work-layout="room"] .project-facts::after, body[data-work-layout="room"] .project-gallery::before, body[data-work-layout="room"] .project-gallery::after, body[data-work-layout="room"] .section-title::before, body[data-work-layout="room"] .section-title::after, body[data-work-layout="room"] .media-grid::before, body[data-work-layout="room"] .media-grid::after, body[data-work-layout="room"] .media-card::before, body[data-work-layout="room"] .media-card::after, body[data-work-layout="room"] .media-card-link::before, body[data-work-layout="room"] .media-card-link::after, body[data-work-layout="room"] .lazy-video::before, body[data-work-layout="room"] .lazy-video::after { content: none !important; display: none !important; }
body[data-work-layout="room"] .site-header { backdrop-filter: blur(8px); border-bottom: 1px solid var(--archive-line) !important; background: color-mix(in srgb, var(--archive-bg) 92%, transparent) !important; box-shadow: none !important; }
body[data-work-layout="room"] .brand, body[data-work-layout="room"] .nav-link, body[data-work-layout="room"] .lang-toggle a { color: var(--archive-ink) !important; text-shadow: none !important; }
body[data-work-layout="room"] .artwork-page { width: 100%; gap: clamp(40px, 5.4vw, 82px); padding-bottom: clamp(48px, 7vw, 104px); background: transparent !important; }
body[data-work-layout="room"] .section { width: min(100% - clamp(28px, 6vw, 96px), 1360px) !important; }
body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-body, body[data-work-layout="room"] .project-gallery, body[data-work-layout="room"] .project-pagination { background: transparent !important; border: 0px !important; box-shadow: none !important; outline: 0px !important; }
body[data-work-layout="room"] .project-hero { min-height: auto !important; grid-template-columns: minmax(260px, 0.38fr) minmax(420px, 0.62fr) !important; align-items: end !important; gap: clamp(24px, 5vw, 72px) !important; padding-top: clamp(120px, 14vw, 188px) !important; padding-bottom: clamp(30px, 4vw, 56px) !important; border-bottom: 1px solid var(--archive-line) !important; }
body[data-work-layout="room"] .project-copy { align-self: end; max-width: 560px; padding: 0px !important; }
body[data-work-layout="room"] .project-back, body[data-work-layout="room"] .project-actions .button { width: max-content; border-top: 0px !important; border-right: 0px !important; border-left: 0px !important; border-image: none !important; border-bottom: 1px solid var(--archive-line) !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; color: var(--archive-muted) !important; font: 400 0.82rem/1.2 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; }
body[data-work-layout="room"] .project-back:hover, body[data-work-layout="room"] .project-actions .button:hover { color: var(--archive-ink) !important; border-color: var(--archive-ink) !important; transform: none !important; }
body[data-work-layout="room"] .room-status { display: flex; flex-wrap: wrap; gap: 0.42em; margin: clamp(18px, 3vw, 34px) 0px clamp(14px, 2vw, 24px); color: var(--archive-soft) !important; font: 400 0.78rem/1.35 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; }
body[data-work-layout="room"] .room-status span { color: inherit !important; }
body[data-work-layout="room"] .room-status span + span::before { color: var(--archive-soft) !important; }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long { max-width: 11ch; margin: 0px !important; padding: 0px !important; color: var(--archive-ink) !important; font: 600 clamp(2.55rem, 6vw, 6.1rem) / 0.98 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; text-shadow: none !important; filter: none !important; transform: none !important; }
body[data-work-layout="room"] .project-title > span, body[data-work-layout="room"] .project-title > span::first-letter { color: inherit !important; font-size: 1em !important; font-weight: inherit !important; text-transform: inherit !important; filter: none !important; transform: none !important; }
body[data-work-layout="room"] .project-alt-title, body[data-work-layout="room"] .project-lede { max-width: 42ch; margin-top: clamp(14px, 2vw, 22px); color: var(--archive-muted) !important; font: 400 clamp(0.94rem, 1.12vw, 1.08rem) / 1.58 var(--work-text-font) !important; letter-spacing: 0px !important; text-shadow: none !important; }
body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .project-cover-link { display: block !important; place-self: end stretch !important; padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
body[data-work-layout="room"] .project-cover img { width: 100% !important; height: auto !important; max-height: 78svh !important; object-fit: contain !important; border: 1px solid var(--archive-line) !important; background: var(--archive-paper) !important; box-shadow: none !important; }
body[data-work-layout="room"] .project-body { padding-top: clamp(24px, 3.6vw, 48px); grid-template-columns: minmax(0px, 0.68fr) minmax(220px, 0.32fr) !important; gap: clamp(24px, 5vw, 70px) !important; align-items: start !important; margin-top: 0px !important; border-top: 1px solid var(--archive-line) !important; }
body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts { padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; filter: none !important; transform: none !important; }
body[data-work-layout="room"] .section-kicker, body[data-work-layout="room"] .section-title h2, body[data-work-layout="room"] .fact-row span, body[data-work-layout="room"] .project-pagination span { color: var(--archive-soft) !important; font: 400 0.76rem/1.35 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; }
body[data-work-layout="room"] .section-kicker { margin-bottom: clamp(12px, 1.6vw, 20px); }
body[data-work-layout="room"] .project-statement p, body[data-work-layout="room"] .project-text-block li { max-width: 70ch; color: var(--archive-muted) !important; font: 400 clamp(0.9rem, 1vw, 1rem) / 1.68 var(--work-text-font) !important; letter-spacing: 0px !important; text-shadow: none !important; transform: none !important; }
body[data-work-layout="room"] .project-statement p + p { margin-top: 0.9em; }
body[data-work-layout="room"] .project-text-block { margin-top: clamp(18px, 2.4vw, 30px); padding-top: clamp(12px, 1.8vw, 18px); border-top: 1px solid var(--archive-line); }
body[data-work-layout="room"] .project-text-block h3 { color: var(--archive-ink) !important; font: 500 0.92rem/1.3 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; }
body[data-work-layout="room"] .project-facts { position: sticky; top: 96px; border-top: 1px solid var(--archive-line) !important; }
body[data-work-layout="room"] .fact-row { display: grid; grid-template-columns: 7.4ch minmax(0px, 1fr); gap: 12px; padding: 9px 0px; border-bottom: 1px solid var(--archive-line) !important; }
body[data-work-layout="room"] .fact-row strong { color: var(--archive-ink) !important; font: 400 0.86rem/1.35 var(--work-text-font) !important; letter-spacing: 0px !important; text-transform: none !important; }
body[data-work-layout="room"] .project-gallery { margin-top: 0px !important; }
body[data-work-layout="room"] .project-gallery .section-title { margin-bottom: clamp(14px, 2vw, 26px); padding-top: clamp(14px, 2vw, 24px); border-top: 1px solid var(--archive-line); }
body[data-work-layout="room"] .media-grid, body[data-work-layout="room"] .room-feedback .media-grid, body[data-work-layout="room"] .room-route .media-grid, body[data-work-layout="room"] .room-noir .media-grid, body[data-work-layout="room"] .room-broadcast .media-grid, body[data-work-layout="room"] .room-captcha .media-grid, body[data-work-layout="room"] .room-expedition .media-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: clamp(18px, 2.8vw, 42px) !important; column-count: initial !important; }
body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .media-card:nth-child(n), body[data-work-layout="room"] .room-feedback .media-card, body[data-work-layout="room"] .room-route .media-card, body[data-work-layout="room"] .room-noir .media-card, body[data-work-layout="room"] .room-broadcast .media-card, body[data-work-layout="room"] .room-captcha .media-card, body[data-work-layout="room"] .room-expedition .media-card { grid-column: auto !important; display: block !important; width: auto !important; margin: 0px !important; padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; outline: 0px !important; clip-path: none !important; filter: none !important; transform: none !important; }
body[data-work-layout="room"] .media-card-link, body[data-work-layout="room"] .lazy-video { display: block !important; border: 0px !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
body[data-work-layout="room"] .media-card img, body[data-work-layout="room"] .lazy-video-poster, body[data-work-layout="room"] .lazy-video-player { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; border: 1px solid var(--archive-line) !important; background: var(--archive-paper) !important; filter: none !important; transform: none !important; }
body[data-work-layout="room"] .media-card figcaption { display: none !important; }
body[data-work-layout="room"] .magnetic:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
body[data-work-layout="room"] *, body[data-work-layout="room"] ::before, body[data-work-layout="room"] ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 980px) {
body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-body { grid-template-columns: 1fr !important; }
body[data-work-layout="room"] .project-hero { align-items: start !important; padding-top: 112px !important; }
body[data-work-layout="room"] .project-cover { justify-self: stretch !important; }
body[data-work-layout="room"] .project-cover img { max-height: none !important; }
body[data-work-layout="room"] .project-facts { position: static !important; }
}
@media (max-width: 720px) {
body[data-work-layout="room"] .section { width: min(100% - 24px, 1360px) !important; }
body[data-work-layout="room"] .project-title, body[data-work-layout="room"] .project-title.is-long { max-width: 10ch; font-size: clamp(2.25rem, 13vw, 4.2rem) !important; }
body[data-work-layout="room"] .project-body { padding-top: 22px; }
body[data-work-layout="room"] .media-grid, body[data-work-layout="room"] .room-feedback .media-grid, body[data-work-layout="room"] .room-route .media-grid, body[data-work-layout="room"] .room-noir .media-grid, body[data-work-layout="room"] .room-broadcast .media-grid, body[data-work-layout="room"] .room-captcha .media-grid, body[data-work-layout="room"] .room-expedition .media-grid, body[data-work-layout="room"] .project-pagination { grid-template-columns: 1fr !important; }
body[data-work-layout="room"] .fact-row { grid-template-columns: 1fr; gap: 2px; }
}
body[data-work-layout="room"] { --archive-line: transparent !important; }
body[data-work-layout="room"] .site-header, body[data-work-layout="room"] .project-hero, body[data-work-layout="room"] .project-copy, body[data-work-layout="room"] .project-back, body[data-work-layout="room"] .project-actions .button, body[data-work-layout="room"] .project-cover, body[data-work-layout="room"] .project-cover-link, body[data-work-layout="room"] .project-cover img, body[data-work-layout="room"] .project-body, body[data-work-layout="room"] .project-statement, body[data-work-layout="room"] .project-facts, body[data-work-layout="room"] .fact-row, body[data-work-layout="room"] .project-text-block, body[data-work-layout="room"] .project-gallery, body[data-work-layout="room"] .project-gallery .section-title, body[data-work-layout="room"] .media-grid, body[data-work-layout="room"] .media-card, body[data-work-layout="room"] .media-card-link, body[data-work-layout="room"] .media-card img, body[data-work-layout="room"] .lazy-video, body[data-work-layout="room"] .lazy-video-poster, body[data-work-layout="room"] .lazy-video-player, body[data-work-layout="room"] .lazy-video-icon, body[data-work-layout="room"] .lazy-video-label, body[data-work-layout="room"] .project-pagination, body[data-work-layout="room"] .project-pagination a { border: 0px !important; outline: 0px !important; box-shadow: none !important; }