.hdr-site-name {
display: inline-flex;
font-family: var(--font-body);
align-items: center;
min-block-size: var(--size-target-min);
overflow: hidden;
font-size: var(--text-m);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (min-width: 48em) {
.hdr-site-name {
font-size: var(--text-l);
}
}
@media (max-width: 22.49em) {
.hdr-site-name {
font-size: var(--hdr-name-size-narrow);
}
}
.gold-text {
background-image: linear-gradient(var(--gold-text-angle), var(--selector-icon-active), var(--selector-icon) 45%, var(--gold-from, var(--color-gold-deep)));
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: transparent;
font-weight: var(--font-weight-gold);
}
.gold-title {
background-size: 100% 1.2em;
background-size: 100% 1lh;
background-repeat: repeat-y;
}
.gold-title,
.col-entry-title {
padding-block-end: var(--gold-text-room);
margin-block-end: calc(var(--space-m) - var(--gold-text-room));
background-image: linear-gradient(var(--color-gold-deep), var(--color-gold-deep)), linear-gradient(var(--gold-text-angle), var(--selector-icon-active), var(--selector-icon) 45%, var(--gold-from, var(--color-gold-deep)));
background-position: 0 100%, 0 0;
background-repeat: no-repeat, repeat-y;
}
.gold-title {
background-size: 100% var(--gold-text-room), 100% 1.2em;
background-size: 100% var(--gold-text-room), 100% 1lh;
}
.col-entry-title {
background-size: 100% var(--gold-text-room), 100% calc(100% - var(--gold-text-room));
}
@media (prefers-contrast: more) {
.gold-text {
background-image: none;
color: var(--color-text);
}
.icon-line {
stroke: currentColor;
}
}
@media (forced-colors: active) {
.gold-text {
background-image: none;
color: CanvasText;
}
.icon-line {
stroke: CanvasText;
}
}
.lang-list,
.lang-root-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-s);
margin: 0;
}
.lang-link,
.lang-root-link,
.page-link {
display: inline-flex;
align-items: center;
min-block-size: var(--size-target-min);
min-inline-size: var(--size-target-min);
padding-inline: var(--space-s);
border-radius: var(--radius-s);
}
.lacquer {
position: relative;
background-color: var(--lacquer-base);
background-image: var(--lacquer-layer, none), linear-gradient(to bottom, var(--lacquer-top, var(--lacquer-gloss)), var(--lacquer-base) var(--lacquer-gloss-stop));
background-size: var(--lacquer-layer-size, auto), auto;
border: 0;
border-radius: var(--lacquer-radius);
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--lacquer-shadow);
color: var(--color-text);
}
.lacquer[data-pattern="surface"] {
--lacquer-layer: var(--pattern-surface);
--lacquer-layer-size: var(--pattern-surface-size);
}
.lacquer[data-lacquer="box"]::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: var(--lacquer-radius);
block-size: var(--gold-line-width);
background: var(--gold-line);
pointer-events: none;
}
@media not all and (prefers-contrast: more) {
.page:not([data-page="home"]) .lacquer[data-lacquer="box"]::before {
inset-inline: 0;
block-size: var(--box-glow-height);
border-start-start-radius: var(--lacquer-radius);
border-start-end-radius: var(--lacquer-radius);
background-image: var(--box-glow), var(--gold-line);
background-attachment: fixed, scroll;
background-position: 0 0, 50% 0;
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, calc(100% - 2 * var(--lacquer-radius)) var(--gold-line-width);
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--gold-line-width), rgba(0, 0, 0, 0.55) calc(var(--gold-line-width) + 1px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0, #000 var(--gold-line-width), rgba(0, 0, 0, 0.55) calc(var(--gold-line-width) + 1px), transparent 100%);
}
}
@property --box-glow-k {
syntax: "<number>";
inherits: true;
initial-value: 0.5;
}
@keyframes box-glow-follow {
0%,
45% {
--box-glow-k: 0;
}
55.8% {
--box-glow-k: 0.09;
}
67.8% {
--box-glow-k: 0.28;
}
81% {
--box-glow-k: 0.55;
}
94.2% {
--box-glow-k: 0.82;
}
100% {
--box-glow-k: 0.92;
}
}
.lacquer[data-lacquer="gold"] {
--lacquer-sheen: var(--gold-tab-sheen);
--gold-top: var(--selector-icon-active);
background-color: var(--selector-icon);
background-image: linear-gradient(to bottom, var(--gold-top), var(--selector-icon) 55%, var(--color-gold-deep));
box-shadow: inset 0 var(--lacquer-edge-width) 0 var(--gold-tab-gloss), var(--tab-shadow);
color: var(--gold-tab-ink);
}
.lacquer[data-lacquer="gold"]:is(a, button, summary):is(:hover, :focus-visible) {
--gold-top: color-mix(in srgb, var(--selector-icon-active), #ffffff var(--gold-tab-hover-mix));
box-shadow: inset 0 var(--lacquer-edge-width) 0 var(--gold-tab-gloss), var(--tab-shadow);
}
.lacquer[data-lacquer="gold"] .gold-text {
background-image: none;
color: var(--gold-tab-ink);
}
.lacquer[data-lacquer="gold"] .icon-line {
stroke: var(--gold-tab-ink);
}
@media (prefers-contrast: more) {
.lacquer[data-lacquer="gold"],
.lacquer[data-lacquer="gold"]:is(a, button, summary):is(:hover, :focus-visible) {
background-image: none;
background-color: var(--selector-icon);
}
}
@media (forced-colors: active) {
.lacquer[data-lacquer="gold"] .gold-text {
color: CanvasText;
}
.lacquer[data-lacquer="gold"] .icon-line {
stroke: CanvasText;
}
}
.hdr-cmd {
--tab-radius: calc(var(--tile-radius-ratio) * 2 * var(--tab-h));
z-index: 2;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
block-size: var(--tab-h);
min-inline-size: var(--size-target-min);
padding-inline: var(--space-xs);
border-radius: 0;
border-start-start-radius: var(--tab-radius);
border-start-end-radius: var(--tab-radius);
font: inherit;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.lacquer::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(var(--lacquer-sheen-angle), transparent 35%, var(--lacquer-sheen) 50%, transparent 65%) 100% 0 / 250% 100% no-repeat;
opacity: 0;
pointer-events: none;
}
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)) {
transition:
transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)):is(:hover, :focus-visible, :focus-within) {
--lacquer-top: var(--lacquer-gloss-hover);
}
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)):not(.nav-tab, .hdr-cmd):is(:hover, :focus-visible, :focus-within) {
transform: translateY(calc(-1 * var(--lacquer-lift)));
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--lacquer-shadow-hover);
}
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)):is(:hover, :focus-visible, :focus-within)::after {
animation-name: lacquer-sheen;
animation-duration: var(--duration-lacquer-sheen);
animation-timing-function: var(--ease-standard);
animation-fill-mode: both;
}
[dir="rtl"] .lacquer::after {
animation-direction: reverse;
}
@keyframes lacquer-sheen {
from {
opacity: 1;
background-position: 100% 0;
}
to {
opacity: 1;
background-position: 0% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)):is(:hover, :focus-visible, :focus-within) {
transform: none;
}
.lacquer:is(a, button, summary, [data-lacquer="box"]:has(a)):is(:hover, :focus-visible, :focus-within)::after {
animation: none;
}
}
@media (forced-colors: active) {
.lacquer {
border: var(--border-width) solid CanvasText;
}
}
.icon-line {
flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
fill: none;
stroke: url("#hdr-gold");
stroke-width: var(--icon-stroke);
stroke-linecap: round;
stroke-linejoin: round;
}
.hdr-defs {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
.hdr-gold-stop[data-part="deep"] {
stop-color: var(--color-gold-deep);
}
.hdr-gold-stop[data-part="mid"] {
stop-color: var(--selector-icon);
}
.hdr-gold-stop[data-part="light"] {
stop-color: var(--selector-icon-active);
}
.nav-list {
display: none;
align-items: flex-end;
gap: var(--space-2xs);
margin: 0;
}
.nav-tab {
--tab-radius: calc(var(--tile-radius-ratio) * 2 * var(--tab-h));
--lacquer-layer: var(--pattern-tab);
--lacquer-layer-size: var(--pattern-tab-size);
z-index: 2;
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
gap: var(--space-xs);
block-size: var(--tab-h);
min-inline-size: var(--size-target-min);
padding-inline: var(--space-s);
border-radius: 0;
border-start-start-radius: var(--tab-radius);
border-start-end-radius: var(--tab-radius);
box-shadow:
inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit),
inset var(--lacquer-edge-width) 0 0 var(--lacquer-edge),
inset calc(-1 * var(--lacquer-edge-width)) 0 0 var(--lacquer-edge),
var(--tab-shadow);
font: inherit;
text-decoration: none;
white-space: nowrap;
overflow-wrap: normal;
cursor: pointer;
transition:
transform var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.nav-tab:hover,
.nav-tab:focus-visible {
--gold-from: var(--selector-icon);
transform: translateY(calc(-1 * var(--tab-hover-lift)));
box-shadow:
inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit),
inset var(--lacquer-edge-width) 0 0 var(--lacquer-edge),
inset calc(-1 * var(--lacquer-edge-width)) 0 0 var(--lacquer-edge),
0 var(--tab-hover-lift) 0 0 var(--lacquer-base),
var(--tab-shadow);
}
.nav-tab[data-state="current"],
.nav-tab[data-state="current"]:hover {
--gold-from: var(--selector-icon);
--lacquer-layer: radial-gradient(ellipse var(--tab-cone-size) at 50% 0%, color-mix(in srgb, var(--selector-light) var(--tab-cone-mix), transparent), transparent 100%);
--lacquer-layer-size: auto;
--lacquer-top: color-mix(in srgb, var(--selector-light) var(--lacquer-light-mix), var(--lacquer-gloss));
transform: translateY(calc(-1 * var(--tab-active-rise)));
box-shadow:
inset 0 var(--tab-rim-width) 0 var(--selector-rim-light),
inset var(--lacquer-edge-width) 0 0 var(--lacquer-edge),
inset calc(-1 * var(--lacquer-edge-width)) 0 0 var(--lacquer-edge),
0 var(--tab-active-rise) 0 0 var(--lacquer-base),
var(--tab-shadow);
}
.menu {
position: relative;
display: flex;
align-items: flex-end;
}
.menu-button {
list-style: none;
}
.menu-button::-webkit-details-marker {
display: none;
}
.lang-menu-button {
inline-size: var(--lang-button-width);
}
.hdr-cmd-text {
overflow: hidden;
font-size: var(--text-s);
text-overflow: ellipsis;
}
.lang-code {
font-size: var(--text-s);
letter-spacing: 0.08em;
}
.menu-panel {
position: absolute;
inset-block-start: 100%;
inset-inline-end: 0;
z-index: 50;
inline-size: max-content;
max-inline-size: calc(100vw - 2 * var(--space-gutter));
padding: var(--drawer-padding);
border-start-start-radius: 0;
border-start-end-radius: 0;
}
.lacquer[data-lacquer="drawer"] {
--lacquer-radius: var(--radius-m);
background-image: linear-gradient(to bottom, var(--lacquer-gloss), var(--lacquer-base) 40%);
box-shadow: inset var(--drawer-rim-width) 0 0 var(--drawer-rim), inset calc(-1 * var(--drawer-rim-width)) 0 0 var(--drawer-rim), inset 0 calc(-1 * var(--drawer-rim-width)) 0 var(--drawer-rim), var(--tab-shadow);
}
.lang-menu-panel {
min-inline-size: var(--lang-button-width);
max-inline-size: var(--drawer-max-width);
}
.nav-menu-panel {
min-inline-size: 12rem;
}
.menu[open] > .menu-panel,
.menu-panel[data-state="open"] {
animation: menu-open var(--duration-menu-open) var(--ease-standard);
}
@keyframes menu-open {
from {
opacity: 0;
filter: brightness(0);
}
}
.menu-panel .lang-link {
min-block-size: var(--drawer-item-height);
padding-inline: var(--drawer-item-padding);
color: var(--selector-icon);
font-size: var(--text-s);
font-weight: var(--font-weight-gold);
}
[dir="ltr"] .menu-panel .lang-link[dir="rtl"],
[dir="rtl"] .menu-panel .lang-link[dir="ltr"] {
justify-content: flex-end;
text-align: end;
}
.menu-panel .lang-link:hover {
background: var(--lacquer-edge);
}
.menu-panel .lang-current,
.menu-panel .lang-current:hover {
background-image: linear-gradient(to bottom, var(--selector-icon-active), var(--selector-icon) 55%, var(--color-gold-deep));
color: var(--gold-tab-ink);
}
.menu-panel .lang-menu-title {
color: var(--color-text-muted);
}
@media (prefers-contrast: more) {
.menu-panel .lang-current,
.menu-panel .lang-current:hover {
background-image: none;
background-color: var(--selector-icon);
}
}
.menu-panel .lang-list,
.nav-menu-list {
flex-direction: column;
align-items: stretch;
gap: var(--drawer-item-gap);
margin: 0;
}
.nav-menu-list .nav-tab {
justify-content: flex-start;
inline-size: 100%;
block-size: var(--size-target-min);
border-radius: var(--radius-m);
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit);
}
.nav-menu-list .nav-tab:hover,
.nav-menu-list .nav-tab:focus-visible {
transform: none;
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge-lit);
}
.nav-menu-list .nav-tab[data-state="current"] {
transform: none;
box-shadow: inset 0 var(--tab-rim-width) 0 var(--selector-rim-light), inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge);
}
.nav-menu-meta {
display: none;
}
.nav-menu-langs {
margin-block-start: var(--space-s);
padding-block-start: var(--space-s);
border-block-start: var(--border-width) solid var(--color-border);
}
.lang-menu-title {
margin-block-end: var(--space-2xs);
color: var(--color-text-muted);
font-size: var(--text-s);
}
.lang-link {
inline-size: 100%;
text-decoration: none;
}
@media (min-width: 72em) {
.nav-list {
display: flex;
}
.nav-phone {
display: none;
}
}
@media (max-width: 71.99em) {
.nav[data-part="main"] {
display: none;
}
}
@media (max-width: 89.99em) {
.nav-list .nav-tab-icon {
display: none;
}
}
@media (max-width: 71.99em) {
.lang-menu {
display: none;
}
}
@media (max-width: 24.99em) {
.nav-menu-button .hdr-cmd-text {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.audio-sfx[data-variant="footer"] {
display: none;
}
.audio-sfx {
position: relative;
display: flex;
flex: none;
align-items: flex-end;
}
.audio-toggle {
inline-size: var(--sfx-button-width);
perspective: 20rem;
}
html:not([data-js]) .audio-toggle,
html:not([data-js]) .audio-tip,
.audio-sfx[data-state="unavailable"] .audio-toggle,
.audio-sfx[data-state="unavailable"] .audio-tip {
visibility: hidden;
}
.audio-card {
position: relative;
display: grid;
place-items: center;
inline-size: 100%;
block-size: 100%;
}
.audio-face {
grid-area: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
inline-size: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.audio-face-front {
display: none;
}
.audio-icon {
inline-size: 1.25rem;
block-size: 1.25rem;
}
.audio-face-back .icon-line-path[data-part="sfx-bars"],
html[data-sfx="on"] .audio-face-back .icon-line-path[data-part="sfx-cross"] {
display: none;
}
html[data-sfx="on"] .audio-face-back .icon-line-path[data-part="sfx-bars"] {
display: inline;
}
@media (max-width: 47.99em) {
.audio-toggle {
inline-size: var(--sfx-button-width-phone);
}
.audio-short {
display: none;
}
}
.audio-bar {
position: relative;
display: block;
flex: 1 1 auto;
min-inline-size: 0;
block-size: var(--sfx-bar-height);
overflow: hidden;
border: var(--border-width) solid var(--gold-tab-ink);
border-radius: var(--sfx-bar-height);
}
.audio-bar-fill {
position: absolute;
inset: 0;
background: var(--gold-tab-ink);
transform: scaleX(0);
transform-origin: 0 50%;
}
[dir="rtl"] .audio-bar-fill {
transform-origin: 100% 50%;
}
.audio-bar::after {
content: "";
position: absolute;
inset: 0;
padding: var(--border-width);
border-radius: inherit;
background: linear-gradient(100deg, transparent 40%, var(--gold-tab-sheen) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.audio-intro-icon .icon-line-path:is([data-part="sfx-wave-1"], [data-part="sfx-wave-2"], [data-part="sfx-wave-3"]) {
opacity: 0;
}
[dir="rtl"] .audio-intro-icon {
transform: scaleX(-1);
}
@media (max-width: 47.99em) {
html[data-sfx-intro] .audio-toggle {
padding-inline: var(--space-2xs);
}
.audio-intro-icon {
inline-size: var(--sfx-intro-icon-phone);
block-size: var(--sfx-intro-icon-phone);
}
}
html[data-sfx-intro] .audio-face-front {
display: flex;
}
html[data-sfx-intro] .audio-face-back {
transform: rotateX(-90deg);
}
html[data-sfx-intro="wait"] .audio-toggle {
opacity: 0;
}
html[data-sfx-intro="play"] .audio-toggle {
animation: sfx-intro-show var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-face-front {
animation: sfx-intro-front var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-face-back {
animation: sfx-intro-flip var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-bar-fill {
animation: sfx-bar-fill var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-intro-icon .icon-line-path[data-part="sfx-cross"] {
animation: sfx-cross-off var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-intro-icon .icon-line-path[data-part="sfx-wave-1"] {
animation: sfx-wave-1 var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-intro-icon .icon-line-path[data-part="sfx-wave-2"] {
animation: sfx-wave-2 var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-intro-icon .icon-line-path[data-part="sfx-wave-3"] {
animation: sfx-wave-3 var(--duration-sfx-intro) linear both;
}
html[data-sfx-intro="play"] .audio-bar::after {
animation: sfx-glint var(--duration-sfx-glint) linear infinite;
}
@keyframes sfx-intro-show {
0% {
opacity: 0;
}
8%,
100% {
opacity: 1;
}
}
@keyframes sfx-cross-off {
0%,
12% {
opacity: 1;
}
15%,
100% {
opacity: 0;
}
}
@keyframes sfx-bar-fill {
0%,
15% {
transform: scaleX(0);
}
58%,
100% {
transform: scaleX(1);
}
}
@keyframes sfx-wave-1 {
0%,
26% {
opacity: 0;
}
29%,
100% {
opacity: 1;
}
}
@keyframes sfx-wave-2 {
0%,
40% {
opacity: 0;
}
43%,
100% {
opacity: 1;
}
}
@keyframes sfx-wave-3 {
0%,
55% {
opacity: 0;
}
58%,
100% {
opacity: 1;
}
}
@keyframes sfx-intro-front {
0%,
66% {
transform: rotateX(0deg);
animation-timing-function: var(--ease-page-leave);
}
83% {
transform: rotateX(90deg);
visibility: visible;
}
83.01%,
100% {
transform: rotateX(90deg);
visibility: hidden;
}
}
@keyframes sfx-intro-flip {
0%,
83% {
transform: rotateX(-90deg);
animation-timing-function: var(--ease-page-enter);
}
100% {
transform: rotateX(0deg);
}
}
@keyframes sfx-glint {
to {
background-position: 0 0;
}
}
.audio-tip {
position: absolute;
inset-block-start: calc(100% + var(--space-xs));
inset-inline-end: 0;
z-index: 60;
padding: var(--space-3xs) var(--space-xs);
background: var(--selector-tile);
color: var(--color-text);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-s);
font-size: var(--text-s);
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--duration-fast) var(--ease-standard);
}
.audio-sfx:hover .audio-tip,
.audio-toggle:focus-visible + .audio-tip {
opacity: 1;
visibility: visible;
}
.audio-sfx[data-tip="hidden"] .audio-tip {
opacity: 0;
visibility: hidden;
}
.about-h1,
.proj-h1,
.col-h1,
.play-h1,
.form-h1,
.legal-h1,
.page-h1,
.lang-root-h1 {
font-size: var(--text-title);
line-height: var(--leading-heading);
}
.about-title,
.proj-title,
.col-title,
.play-title,
.form-title,
.legal-title,
.home-title {
font-size: var(--text-l);
}
.ftr {
background-color: var(--selector-tile);
background-image: linear-gradient(to bottom, var(--lacquer-gloss), var(--selector-tile) 70%);
font-family: var(--font-body);
}
@media not all and (prefers-contrast: more) {
.page:not([data-page="home"]) .hdr {
background-color: var(--color-bg);
background-image: var(--page-light), var(--page-light-floor);
background-attachment: fixed, fixed;
background-size: 100% 100%, 100% 100%;
}
.page:not([data-page="home"]) .ftr {
background-color: var(--color-bg);
background-image: var(--footer-gloss), var(--page-light), var(--page-light-floor);
background-attachment: scroll, fixed, fixed;
background-size: auto, 100% 100%, 100% 100%;
}
}
.ftr-nav {
display: contents;
}
.ftr-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--space-l);
margin: 0;
font-size: var(--text-s);
}
.ftr-row[data-row="small"] {
gap: 0 var(--space-m);
color: var(--color-ivory-muted);
font-size: var(--text-xs);
}
.ftr-item {
display: inline-flex;
align-items: baseline;
gap: var(--space-2xs);
min-block-size: 1.5rem;
}
.ftr-link {
display: inline-flex;
align-items: center;
min-block-size: 1.5rem;
text-decoration-line: underline;
text-decoration-thickness: var(--border-width);
text-decoration-color: var(--color-gold-deep);
text-underline-offset: 0.25em;
}
.ftr-link:hover {
text-decoration-color: var(--selector-icon);
}
.ftr-status,
.ftr-meta-label {
color: var(--color-ivory-muted);
font-size: var(--text-xs);
}
.ftr-row[data-row="small"] .ftr-text,
.ftr-meta-value,
.ftr-notice {
color: var(--color-ivory-muted);
}
@media (prefers-reduced-motion: no-preference) {
.lang-link {
transition: background-color var(--duration-base) var(--ease-standard);
}
}
@media (prefers-reduced-motion: reduce) {
.nav-tab:hover,
.nav-tab:focus-visible {
transform: none;
}
}
.nav-crumb {
margin-block-end: var(--space-l);
font-size: var(--text-s);
}
.nav-crumb-list {
padding-inline-start: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs) var(--space-xs);
margin: 0;
}
.nav-crumb-item + .nav-crumb-item::before {
content: "\203A";
margin-inline-end: var(--space-xs);
color: var(--color-text-muted);
}
.nav-crumb-link,
.proj-link {
display: inline-flex;
align-items: center;
min-block-size: var(--size-target-min);
}
.nav-crumb-current {
font-weight: 700;
}
.proj-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-m);
max-inline-size: var(--size-text-max);
margin: 0;
}
.proj-item {
padding: var(--space-l);
}
.proj-item-cover {
display: block;
inline-size: 100%;
block-size: auto;
margin-block-end: var(--space-m);
border-radius: var(--radius-s);
}
.proj-item-title {
margin-block-end: var(--space-2xs);
font-size: var(--text-l);
}
.proj-link::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--lacquer-radius);
}
.proj-link:focus-visible {
outline: none;
box-shadow: none;
}
.proj-item:focus-within {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.proj-item-meta {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-xs);
margin-block-end: var(--space-s);
color: var(--color-text-muted);
font-size: var(--text-s);
}
.proj-meta-item + .proj-meta-item::before {
content: "\00B7";
content: "\00B7" / "";
margin-inline-end: var(--space-xs);
}
.proj-text {
margin-block-end: 0;
}
:is(.about-bio > .about-bio-text, .legal-section > .legal-text, .play-section > .play-text, .proj-section > .proj-text):has(+ :is(.about-bio-text, .legal-text, .play-text, .proj-text)) {
margin-block-end: 0;
}
:is(.about-bio-text, .legal-text, .play-text, .proj-text) + :is(.about-bio > .about-bio-text, .legal-section > .legal-text, .play-section > .play-text, .proj-section > .proj-text) {
margin-block-start: 0;
text-indent: var(--para-indent);
}
.proj-section[data-section="brief"] {
padding: var(--space-l);
}
.proj-brief-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: var(--space-m);
margin: 0;
}
.proj-brief-list-label,
.proj-fork-list-label {
color: var(--color-text-muted);
font-size: var(--text-s);
}
.proj-brief-list-value,
.proj-fork-list-value {
margin: 0;
}
.proj-forks {
display: grid;
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.proj-fork {
padding: var(--space-m) var(--space-l);
}
.proj-fork-list {
display: grid;
gap: var(--space-s);
margin: 0;
}
.proj-figure {
margin: var(--space-m) 0 0;
}
.proj-figure-img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-s);
}
.proj-figure-caption {
margin-block-start: var(--space-2xs);
color: var(--color-text-muted);
font-size: var(--text-s);
}
.legal-updated {
max-inline-size: var(--size-text-max);
margin-block-end: var(--space-l);
color: var(--color-text-muted);
font-size: var(--text-s);
}
.legal-toc {
max-inline-size: var(--size-text-max);
margin-block-end: var(--space-xl);
}
.legal-toc-title {
font-size: var(--text-m);
}
.legal-toc-list {
display: grid;
gap: var(--space-2xs);
margin: 0;
padding-inline-start: var(--space-l);
}
.legal-toc-link,
.legal-contact-link {
display: inline-flex;
align-items: center;
min-block-size: var(--size-target-min);
min-inline-size: var(--size-target-min);
}
.legal-contact {
margin-block: var(--space-m) 0;
}
.home-section {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
margin: 0;
}
.home-block {
position: relative;
display: flex;
flex-direction: column;
}
.home-hint {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-s);
text-align: center;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-hint {
position: absolute;
inset-inline: 0;
inset-block-start: 100%;
padding-block-start: var(--space-2xs);
visibility: hidden;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-block:has(.home-link:focus-visible) .home-hint {
visibility: visible;
}
.home-stage {
position: relative;
flex: none;
inline-size: 100vw;
block-size: clamp(var(--selector-stage-min), calc(100vw * var(--selector-stage-ratio)), var(--selector-stage-height-phone));
margin-inline-start: calc(50% - 50vw);
-webkit-mask-image: var(--selector-edge-mask);
mask-image: var(--selector-edge-mask);
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
transition: opacity var(--duration-selector-fade) var(--ease-standard);
}
.home-stage::before {
content: "";
position: absolute;
inset: 0;
background:
var(--selector-haze),
linear-gradient(var(--marble-veil), var(--marble-veil)),
var(--marble-image) var(--marble-position) / cover no-repeat fixed;
opacity: 0;
transition: opacity var(--duration-selector-fade) var(--ease-standard);
}
.home-stage::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 50%;
inline-size: calc(var(--stage-tile-w, 20%) * var(--stage-light-span));
background:
var(--selector-cone),
var(--selector-glow);
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
transition: opacity var(--duration-selector-fade) var(--ease-standard);
}
[dir="rtl"] .home-stage::after {
transform: translateX(50%);
}
html:not([data-js]) .home-stage,
.home-section[data-selector-state="list"] .home-stage {
display: none;
}
@media (min-width: 48em) {
.home-stage {
block-size: clamp(var(--selector-stage-min), calc(100vw * var(--selector-stage-ratio)), var(--selector-stage-height));
}
}
.home-stage-ready::before,
.home-stage-ready::after,
.home-stage-ready .home-stage-canvas {
opacity: 1;
}
.home-stage-switching {
opacity: 0;
transition-duration: var(--duration-selector-switch);
}
.home-section[data-selector-context="fading"] .home-stage {
opacity: 0;
transition-duration: var(--duration-selector-lost-fade);
}
.home-section[data-selector-reason="context-lost"] .home-list,
.home-section[data-selector-reason="fps"] .home-list {
animation: list-fade-in var(--duration-selector-lost-fade) var(--ease-standard) both;
}
@keyframes list-fade-in {
from {
opacity: 0;
}
}
.home-stage[data-shake="on"] {
animation: stage-shake var(--duration-stage-shake) linear;
}
@keyframes stage-shake {
20% {
transform: translate(var(--stage-shake), calc(var(--stage-shake) / -2));
}
45% {
transform: translate(calc(var(--stage-shake) * -1), calc(var(--stage-shake) / 2));
}
70% {
transform: translate(calc(var(--stage-shake) / 2), 0);
}
}
.home-stage-canvas {
position: absolute;
inset: 0;
z-index: 1;
display: block;
inline-size: 100%;
block-size: 100%;
cursor: default;
opacity: 0;
transition: opacity var(--duration-selector-fade) var(--ease-standard);
}
.home-stage[data-cursor="pointer"] .home-stage-canvas {
cursor: pointer;
}
.home-stage-dragging .home-stage-canvas,
.home-stage-dragging[data-cursor="pointer"] .home-stage-canvas {
cursor: grabbing;
}
.home-list {
margin: 0;
}
:is(html:not([data-js]) .home-list, .home-section[data-selector-state="list"] .home-list) {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--home-card-gap);
inline-size: 100%;
max-inline-size: calc(var(--home-cols, 1) * var(--home-card-size) + (var(--home-cols, 1) - 1) * var(--home-card-gap));
margin-inline: auto;
}
:is(html:not([data-js]) .home-item, .home-section[data-selector-state="list"] .home-item) {
flex: none;
inline-size: var(--home-card-size);
}
:is(html:not([data-js]) .home-link, .home-section[data-selector-state="list"] .home-link) {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
aspect-ratio: 1;
padding: var(--space-s);
--lacquer-radius: calc(var(--tile-radius-ratio) * var(--home-card-size));
font-size: var(--text-m);
line-height: var(--leading-heading);
text-align: center;
text-decoration: none;
}
.home-link-face {
display: contents;
}
:is(html:not([data-js]) .home-link-icon, .home-section[data-selector-state="list"] .home-link-icon) {
inline-size: var(--home-card-icon);
block-size: var(--home-card-icon);
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-list {
position: relative;
display: flex;
justify-content: center;
min-block-size: max(var(--size-target-min), var(--selector-arrows-size));
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-item:not(.home-item-active) {
position: absolute;
inline-size: 1px;
block-size: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link.lacquer {
--lacquer-layer: none;
background: none;
box-shadow: none;
transform: none;
display: flex;
align-items: center;
justify-content: center;
min-block-size: var(--size-target-min);
padding-inline: var(--space-s);
font-size: var(--text-l);
font-weight: 700;
text-decoration: none;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link-icon {
display: none;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link.lacquer::before,
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link.lacquer::after {
content: none;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link-text {
white-space: nowrap;
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-block {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) :is(.home-list, .home-arrows) {
grid-row: 2;
grid-column: 1;
}
.home-arrows {
display: none;
}
.home-arrows-defs {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
html[data-js]:not([data-input="touch"]) .home-section[data-selector-state="3d"] .home-block {
--arrows-offset: max(var(--selector-arrows-min-distance), calc(var(--stage-tile-w, 20vw) * var(--selector-arrows-distance)));
}
html[data-js]:not([data-input="touch"]) .home-section[data-selector-state="3d"] .home-arrows {
position: relative;
display: block;
align-self: center;
block-size: var(--selector-arrows-size);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-selector-fade) var(--ease-standard);
}
html[data-js]:not([data-input="touch"]) .home-section[data-selector-state="3d"] .home-block:has(.home-stage-ready) .home-arrows {
opacity: 1;
}
.home-section[data-selector-context="fading"] .home-arrows {
opacity: 0;
transition-duration: var(--duration-selector-lost-fade);
}
html[data-js]:not([data-input="touch"]) .home-section[data-selector-state="3d"] .home-link.lacquer {
max-inline-size: max(var(--size-target-min), calc(2 * var(--arrows-offset) - var(--selector-arrows-size) - 2 * var(--space-s)));
margin-inline: auto;
text-align: center;
}
html[data-js]:not([data-input="touch"]) .home-section[data-selector-state="3d"] .home-link-text {
white-space: normal;
}
.home-arrow {
position: absolute;
inset-block-start: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--selector-arrows-size);
block-size: var(--selector-arrows-size);
pointer-events: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
border-radius: calc(var(--tile-radius-ratio) * var(--selector-arrows-size));
background: linear-gradient(var(--lacquer-gloss), var(--lacquer-base) 55%);
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), var(--lacquer-shadow);
}
.home-arrow::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border-block-start: var(--selector-arrows-cut-width) solid color-mix(in srgb, var(--selector-rim-light) var(--selector-arrows-cut-mix), var(--selector-icon-active));
pointer-events: none;
opacity: var(--selector-arrows-cut);
transition:
opacity var(--duration-selector-arrows-light) var(--ease-standard),
filter var(--duration-selector-arrows-light) var(--ease-standard);
}
.home-arrows[data-state="moving"] .home-arrow::before {
opacity: var(--selector-arrows-cut-moving);
}
.home-arrows[data-state="rest"] .home-arrow:hover::before {
opacity: 1;
filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--selector-rim-light) 45%, transparent));
}
.home-arrow[data-side="start"] {
inset-inline-start: max(0px, calc(50% - var(--arrows-offset) - var(--selector-arrows-size) / 2));
}
.home-arrow[data-side="end"] {
inset-inline-end: max(0px, calc(50% - var(--arrows-offset) - var(--selector-arrows-size) / 2));
}
.home-arrow-icon {
display: block;
inline-size: var(--selector-arrows-icon);
block-size: var(--selector-arrows-icon);
overflow: visible;
opacity: var(--selector-arrows-dim);
fill: none;
stroke-width: var(--selector-arrows-stroke);
filter: var(--selector-arrows-relief);
stroke-linecap: round;
stroke-linejoin: round;
transition:
opacity var(--duration-fast) var(--ease-standard),
filter var(--duration-selector-arrows-flash) var(--ease-standard);
}
.home-arrow[data-side="end"] .home-arrow-icon,
[dir="rtl"] .home-arrow[data-side="start"] .home-arrow-icon {
transform: scaleX(-1);
}
[dir="rtl"] .home-arrow[data-side="end"] .home-arrow-icon {
transform: none;
}
.home-arrow-gold {
stroke: url("#hdr-gold");
}
.home-arrow-mask-line {
stroke: #fff;
}
.home-arrow-copper {
stroke: url("#home-arrow-copper");
opacity: 0;
transition: opacity var(--duration-selector-arrows-light) var(--ease-standard);
}
.home-arrows[data-state="rest"] .home-arrow-copper {
opacity: 1;
}
.home-arrow-copper-stop {
stop-color: color-mix(in srgb, var(--light-color) var(--selector-arrows-copper), var(--selector-icon-active));
}
.home-arrow-copper-stop[data-part="arrow-copper-cold"] {
stop-opacity: 0;
}
.home-arrow-sheen-stop {
stop-color: var(--gold-tab-sheen);
stop-opacity: 0;
}
.home-arrow-sheen-stop[data-part="arrow-sheen-mid"] {
stop-opacity: 1;
}
.home-arrow-sheen {
fill: url("#home-arrow-sheen");
opacity: 0;
}
.home-arrow:hover .home-arrow-icon {
opacity: 1;
}
.home-arrow:hover .home-arrow-sheen {
animation: arrow-sheen var(--duration-lacquer-sheen) var(--ease-standard) both;
}
.home-arrow[data-side="end"]:hover .home-arrow-sheen {
animation-direction: reverse;
}
@keyframes arrow-sheen {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 1;
transform: translateX(48px);
}
}
.home-arrow[data-flash="on"] .home-arrow-icon {
opacity: 1;
filter: brightness(var(--selector-arrows-flash)) var(--selector-arrows-relief);
transition-duration: 0ms;
}
@media (prefers-reduced-motion: reduce) {
.home-arrow:hover .home-arrow-sheen {
animation: none;
}
}
@media (prefers-contrast: more) {
.home-arrow-icon {
color: var(--selector-icon);
}
.home-arrow-gold {
stroke: currentColor;
}
.home-arrow-copper,
.home-arrow-sheen {
display: none;
}
.home-arrow::before {
display: none;
}
}
@media (forced-colors: active) {
.home-arrow {
border: var(--border-width) solid CanvasText;
}
.home-arrow::before {
display: none;
}
.home-arrow-gold {
stroke: CanvasText;
}
.home-arrow-copper,
.home-arrow-sheen {
display: none;
}
}
@font-face {
font-family: "Playfair Display";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(../fonts/playfair-display/playfair-display-latin-700-normal.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[data-stamp="root"] {
--stamp-u: calc(var(--stamp-w) / 260);
display: block;
inline-size: var(--stamp-w);
font-family: var(--stamp-font);
font-weight: 700;
line-height: 1;
}
[data-stamp="paper"] {
--stamp-teeth: calc(var(--stamp-tooth-gap) * var(--stamp-u));
--stamp-perforation: radial-gradient(calc(var(--stamp-tooth-r) * var(--stamp-u)) at 50% 50%, #0000 97%, #000) round calc(var(--stamp-teeth) / -2) calc(var(--stamp-teeth) / -2) / var(--stamp-teeth) var(--stamp-teeth), linear-gradient(#000 0 0) content-box;
display: grid;
box-sizing: border-box;
inline-size: 100%;
block-size: calc(var(--stamp-height) * var(--stamp-u));
padding: calc(var(--stamp-tooth-r) * var(--stamp-u));
background: var(--stamp-paper);
-webkit-mask: var(--stamp-perforation);
mask: var(--stamp-perforation);
}
[data-stamp="red"] {
position: relative;
display: grid;
align-content: center;
justify-items: center;
row-gap: calc((var(--stamp-line-gap) - var(--stamp-text-size)) * var(--stamp-u));
margin: calc((var(--stamp-margin) - var(--stamp-tooth-r)) * var(--stamp-u));
background: var(--stamp-red);
}
[data-stamp="thread"] {
position: absolute;
inset: calc(var(--stamp-thread-inset) * var(--stamp-u));
border: calc(var(--stamp-thread-width) * var(--stamp-u)) solid var(--stamp-thread-color);
pointer-events: none;
}
[data-stamp="line"] {
display: block;
padding-inline-start: var(--stamp-tracking);
color: var(--stamp-ink);
font-size: calc(var(--stamp-text-size) * var(--stamp-u));
letter-spacing: var(--stamp-tracking);
text-transform: uppercase;
white-space: nowrap;
translate: 0 calc(var(--stamp-text-shift) * var(--stamp-u));
}
.home-badge {
--stamp-w: var(--stamp-width);
position: absolute;
inset-inline-start: calc(var(--badge-x, 50%) + var(--stamp-shift-x));
inset-block-start: calc(var(--badge-y, 0px) + var(--stamp-shift-y));
z-index: 2;
opacity: 0;
pointer-events: none;
transform: translate(var(--badge-shift), -50%) rotate(var(--badge-turn));
}
[dir="rtl"] .home-badge {
--badge-shift: 50%;
--badge-turn: calc(-1 * var(--badge-tilt));
}
.home-section:not([data-selector-state="3d"]) .home-badge,
.home-badge[data-state="hidden"] {
display: none;
}
.home-badge[data-state="shown"] {
opacity: 1;
}
.home-badge[data-state="stamp"] {
animation: badge-stamp var(--duration-badge-stamp) var(--ease-standard) both;
}
.home-badge::after,
.about-badge::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.home-badge[data-state="stamp"]::after,
.about-badge::after {
animation: badge-halo var(--duration-badge-halo) ease-out both;
}
.home-link-badge {
--stamp-w: calc(var(--home-card-size) * var(--stamp-card-share));
position: absolute;
inset-block-start: calc(-1 * var(--stamp-card-out));
inset-inline-end: calc(-1 * var(--stamp-card-out));
transform: rotate(var(--badge-tilt));
}
[dir="rtl"] .home-link-badge {
transform: rotate(calc(-1 * var(--badge-tilt)));
}
html[data-js]:not([data-input="touch"]) .home-section:not([data-selector-state="list"]) .home-link-badge-paper {
display: none;
}
@keyframes badge-stamp {
0% {
opacity: 0;
scale: var(--badge-impact-scale);
}
55% {
opacity: 1;
scale: var(--badge-squash);
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes badge-halo {
from {
opacity: var(--badge-halo);
box-shadow: 0 0 0 0 var(--badge-halo-color);
}
to {
opacity: 0;
box-shadow: 0 0 0 1.25rem var(--badge-halo-color);
}
}
.about-head {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-s) var(--space-l);
max-inline-size: var(--size-text-max);
margin-block-end: var(--space-xl);
}
.about-head[data-badge="on"] {
padding-inline-end: calc(var(--stamp-about-width) - var(--stamp-about-out));
}
.about-head > .about-h1 {
margin-block: 0 calc(-1 * var(--gold-text-room));
}
.about-badge {
--stamp-w: var(--stamp-about-width);
position: absolute;
inset-block-start: 50%;
inset-inline-end: calc(-1 * var(--stamp-about-out));
transform: translateY(-50%) rotate(var(--badge-tilt));
animation: badge-stamp var(--duration-badge-stamp) var(--ease-standard) both;
}
[dir="rtl"] .about-badge {
transform: translateY(-50%) rotate(calc(-1 * var(--badge-tilt)));
}
.about-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--size-target-min);
padding-inline: var(--space-l);
text-decoration: none;
}
.col-intro,
.proj-intro {
max-inline-size: var(--size-text-max);
margin-block-end: var(--space-l);
color: var(--color-text-muted);
}
.col-intro-link {
color: var(--selector-icon);
font-weight: var(--font-weight-gold);
text-decoration-color: var(--selector-icon);
}
.col-intro-link-icon {
display: inline-block;
inline-size: 1em;
block-size: 1em;
margin-inline-start: var(--space-2xs);
vertical-align: -0.125em;
}
.col-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}
.col-entry {
padding: var(--space-m) var(--space-l);
}
.col-entry-title {
padding-inline-end: calc(var(--col-icon-size) + var(--space-s));
font-size: var(--text-m);
}
.col-entry-link {
color: inherit;
text-decoration: none;
}
.col-entry-link::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--lacquer-radius);
}
.col-entry-link:focus-visible {
outline: none;
box-shadow: none;
}
.col-entry:focus-within {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.col-entry-icon {
position: absolute;
inset-block-start: var(--space-m);
inset-inline-end: var(--space-m);
inline-size: var(--col-icon-size);
block-size: var(--col-icon-size);
}
.col-entry-date {
display: block;
margin-block: calc(-1 * var(--space-xs)) var(--space-xs);
color: var(--color-text-muted);
font-size: var(--text-s);
}
.col-entry-summary {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-s);
}
.col-entry-lang {
margin-block: var(--space-2xs) 0;
color: var(--color-text-muted);
font-size: var(--text-s);
}
[dir="rtl"] .col-entry-icon,
[dir="rtl"] .col-intro-link-icon {
transform: scaleX(-1);
}
@media (prefers-contrast: more) {
.col-intro-link {
color: var(--color-text);
text-decoration-color: currentColor;
}
}
.lang-root-intro {
color: var(--color-text-muted);
}
.lang-root-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
gap: var(--space-s);
}
.lang-root-link {
inline-size: 100%;
min-block-size: calc(var(--size-target-min) + var(--space-xs));
padding-inline: var(--space-m);
font-size: var(--text-l);
text-decoration: none;
}
.home-debug {
position: fixed;
inset-inline-end: var(--space-m);
inset-block-end: var(--space-m);
z-index: 90;
margin: 0;
padding: var(--space-xs) var(--space-s);
background: var(--color-surface);
color: var(--color-text);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-m);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-s);
}
.home-debug-title {
margin-block-end: var(--space-2xs);
font-weight: 700;
}
.home-debug-list {
display: grid;
grid-template-columns: auto auto;
gap: var(--space-3xs) var(--space-s);
margin: 0;
}
.home-debug-value {
margin: 0;
text-align: end;
}
.img-ph {
position: relative;
inline-size: 100%;
max-inline-size: var(--img-ph-max);
margin: var(--space-m) 0 0;
overflow: hidden;
background-color: var(--color-surface);
background-image:
linear-gradient(var(--lacquer-edge) var(--border-width), transparent var(--border-width)),
linear-gradient(90deg, var(--lacquer-edge) var(--border-width), transparent var(--border-width));
background-size: var(--img-ph-cell) var(--img-ph-cell);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius-m);
}
.img-ph-grid {
position: absolute;
inset: 0;
}
.img-ph-label {
position: absolute;
inset-block-end: var(--space-xs);
inset-inline-start: var(--space-xs);
padding: var(--space-3xs) var(--space-xs);
background: var(--color-bg);
color: var(--color-text);
border-radius: var(--radius-s);
font-size: var(--text-s);
}
.form-intro,
.form-section,
.form-alert,
.form-summary,
.form,
.form-done,
.page-confirm {
max-inline-size: var(--size-text-max);
}
.form-intro {
margin-block-end: var(--space-l);
color: var(--color-text-muted);
}
.form-title {
margin-block-end: var(--space-m);
}
.form.lacquer,
.form-done.lacquer {
display: grid;
gap: var(--form-gap);
padding: var(--form-box-padding);
}
.form.lacquer[data-lacquer="box"]:is(:hover, :focus-visible, :focus-within) {
--lacquer-top: var(--lacquer-gloss);
transform: none;
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--lacquer-shadow);
}
.form.lacquer[data-lacquer="box"]:is(:hover, :focus-visible, :focus-within)::after {
animation: none;
}
.form[hidden],
.form-done[hidden] {
display: none;
}
.form-field {
display: grid;
gap: var(--space-2xs);
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.form-label {
display: block;
margin: 0;
padding: 0;
font-weight: var(--font-weight-gold);
}
.form-req {
margin-inline-start: var(--space-2xs);
color: var(--color-text-muted);
font-size: var(--text-s);
font-weight: normal;
}
.form-hint,
.form-more {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-s);
}
.form-input {
box-sizing: border-box;
inline-size: 100%;
min-block-size: var(--size-target-min);
padding: var(--field-padding-block) var(--field-padding-inline);
border: var(--field-border-width) solid var(--field-border);
border-radius: var(--field-radius);
background-color: var(--field-bg);
color: var(--color-text);
font: inherit;
}
.form-textarea {
min-block-size: calc(6 * var(--leading-body) * 1em);
resize: vertical;
}
.form-input:focus-visible,
.form-radio:focus-visible,
.form-check:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.form-input[aria-invalid="true"],
.form-fieldset[aria-invalid="true"] .form-radio,
.form-check[aria-invalid="true"] {
border-color: var(--color-error);
outline-color: var(--color-error);
}
.form-options {
display: grid;
gap: 0;
}
.form-option,
.form-check-row {
display: flex;
align-items: center;
gap: var(--space-s);
min-block-size: var(--size-target-min);
}
.form-radio,
.form-check {
flex: none;
inline-size: var(--field-check-size);
block-size: var(--field-check-size);
margin: 0;
accent-color: var(--field-accent);
}
.form-option-label,
.form-check-label {
display: flex;
flex: 1 1 auto;
align-items: center;
min-block-size: var(--size-target-min);
}
.form-check-label {
display: block;
padding-block: var(--space-xs);
}
.form-error {
margin: 0;
color: var(--color-error);
font-size: var(--text-s);
font-weight: var(--font-weight-gold);
}
.form-counter {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-s);
font-variant-numeric: tabular-nums;
}
.form-trap {
position: absolute;
inset-inline-start: -100vw;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.form-captcha {
min-block-size: var(--size-target-min);
min-inline-size: min(100%, var(--form-captcha-min));
}
.form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m);
}
.form-submit,
.form-retry,
.form-fix,
.page-confirm-do,
.page-confirm-retry {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--size-target-min);
min-inline-size: var(--size-target-min);
padding-inline: var(--space-l);
font: inherit;
cursor: pointer;
}
.form-submit[aria-disabled="true"],
.page-confirm-do[aria-disabled="true"] {
cursor: progress;
opacity: 0.7;
}
.form-status,
.page-confirm-working,
.page-confirm-loading {
color: var(--color-text-muted);
font-size: var(--text-s);
}
.form-nojs {
margin: 0;
}
.form[data-ready] .form-nojs,
.form:not([data-ready]) .form-captcha-field,
.form:not([data-ready]) .form-actions {
display: none;
}
.form-link {
display: inline-flex;
align-items: center;
min-block-size: var(--size-target-min);
}
.form-alert,
.form-summary,
.page-confirm-result {
display: grid;
gap: var(--space-xs);
margin-block-end: var(--space-m);
padding: var(--space-m) var(--space-l);
}
.form-alert[hidden],
.form-summary[hidden],
.page-confirm-result[hidden],
.page-confirm-request[hidden] {
display: none;
}
.form-alert-title,
.form-summary-title,
.form-done-title {
margin: 0;
font-size: var(--text-m);
}
.form-alert-text,
.form-alert-other,
.form-done-text,
.page-confirm-result-text,
.page-confirm-more {
margin: 0;
}
.form-summary-list {
margin: 0;
padding-inline-start: var(--space-l);
}
.form-summary-link {
display: inline-flex;
align-items: center;
min-block-size: var(--size-target-min);
color: var(--color-error);
}
.form-done-email {
overflow-wrap: anywhere;
}
.form-alert:focus-visible,
.form-summary:focus-visible,
.form-done:focus-visible,
.page-confirm-result:focus-visible,
.page-confirm-title:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.page-confirm-nojs {
margin: 0;
}
.page-confirm[data-state="ready"] .page-confirm-nojs {
display: none;
}
.page-confirm-request {
display: grid;
gap: var(--space-m);
padding: var(--form-box-padding);
}
.page-confirm-title {
margin: 0;
font-size: var(--text-l);
}
.page-confirm-intro {
margin: 0;
}
.page-confirm-list {
display: grid;
gap: var(--space-s);
margin: 0;
}
.page-confirm-label {
color: var(--color-text-muted);
font-size: var(--text-s);
}
.page-confirm-value {
margin: 0;
}
.page-confirm-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m);
}
:root {
--img-ph-cell: 16px;
}
.page[data-page="home"] {
--marble-on: var(--marble-page-home);
--content-max: var(--content-max-home);
}
.page[data-page="about"] {
--marble-on: var(--marble-page-about);
--content-max: var(--content-max-about);
}
.page[data-page="projects"] {
--marble-on: var(--marble-page-projects);
--content-max: var(--content-max-projects);
}
.page[data-page="project"] {
--marble-on: var(--marble-page-project);
--content-max: var(--content-max-project);
}
.page[data-page="column"] {
--marble-on: var(--marble-page-column);
--content-max: var(--content-max-column);
}
.page[data-page="playroom"] {
--marble-on: var(--marble-page-playroom);
--content-max: var(--content-max-playroom);
}
.page[data-page="contact"] {
--marble-on: var(--marble-page-contact);
--content-max: var(--content-max-contact);
}
.page[data-page="privacy"] {
--marble-on: var(--marble-page-privacy);
--content-max: var(--content-max-privacy);
}
.page[data-page="accessibility"] {
--marble-on: var(--marble-page-accessibility);
--content-max: var(--content-max-accessibility);
}
.page[data-page="notfound"] {
--marble-on: var(--marble-page-notfound);
--content-max: var(--content-max-notfound);
}
.page[data-page="root"] {
--marble-on: var(--marble-page-root);
--content-max: var(--content-max-root);
}
.page[data-page="confirm"] {
--marble-on: var(--marble-page-confirm);
--content-max: var(--content-max-confirm);
}
.page[data-page="text"] {
--marble-on: var(--marble-page-text);
--content-max: var(--content-max-text);
}
.page[data-page="collection"] {
--marble-on: var(--marble-page-collection);
--content-max: var(--content-max-collection);
}
.page[data-page="item"] {
--marble-on: var(--marble-page-item);
--content-max: var(--content-max-item);
}
:root {
--selector-stage-ratio: var(--selector-stage-ratio-1);
}
@media (min-width: 768px) {
:root {
--selector-stage-ratio: var(--selector-stage-ratio-3);
}
}
@media (min-width: 1024px) {
:root {
--selector-stage-ratio: var(--selector-stage-ratio-5);
}
}
.home-list[data-count="6"] {
--home-cols: 1;
}
@media (min-width: 352px) {
.home-list[data-count="6"] {
--home-cols: 2;
}
}
@media (min-width: 522px) {
.home-list[data-count="6"] {
--home-cols: 3;
}
}
@media (min-width: 1044px) {
.home-list[data-count="6"] {
--home-cols: 6;
}
}
.home-list[data-cols="1"] {
--home-grid-cols: 1;
}
.home-list[data-cols="2"] {
--home-grid-cols: 2;
}
.home-list[data-cols="3"] {
--home-grid-cols: 3;
}
.home-list[data-cols="4"] {
--home-grid-cols: 4;
}
.home-list[data-cols="5"] {
--home-grid-cols: 5;
}
.home-list[data-cols="6"] {
--home-grid-cols: 6;
}
@media (pointer: coarse) {
:root {
--hdr-h: var(--touch-hdr-height);
--tab-h: var(--touch-target);
scroll-padding-block: calc(var(--hdr-h) + var(--touch-safe-top) + var(--space-m)) calc(var(--touch-footer-height) + var(--touch-safe-bottom) + var(--space-m));
}
.page {
min-block-size: 100dvh;
padding-block-start: calc(var(--hdr-h) + var(--touch-safe-top));
padding-block-end: calc(var(--touch-footer-height) + var(--touch-safe-bottom));
}
.hdr {
block-size: calc(var(--hdr-h) + var(--touch-safe-top));
padding-block-start: var(--touch-safe-top);
padding-inline: var(--touch-edge);
}
.main {
padding-inline: var(--touch-edge);
}
.nav[data-part="main"],
.hdr-divider,
.hdr-tools {
display: none;
}
.nav-phone {
display: flex;
}
.nav-menu-button {
min-inline-size: var(--touch-target);
}
.nav-menu-button .hdr-cmd-text {
position: static;
inline-size: auto;
block-size: auto;
overflow: hidden;
clip-path: none;
}
.nav-menu-panel {
inline-size: calc(100vw - 2 * var(--touch-edge));
max-inline-size: none;
max-block-size: calc(100dvh - var(--hdr-h) - var(--touch-safe-top) - var(--touch-footer-height) - var(--touch-safe-bottom));
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-menu-list .nav-tab {
block-size: auto;
min-block-size: var(--touch-target);
}
.nav-menu-langs .lang-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-menu-langs .lang-list:has(> .lang-item:last-child:nth-child(odd)) > .lang-item:has(.lang-current) {
grid-column: 1 / -1;
order: -1;
}
.menu-panel .lang-link {
display: flex;
align-items: center;
min-block-size: var(--touch-target);
}
.nav-menu-meta {
display: grid;
gap: var(--space-xs);
margin-block-start: var(--space-s);
padding-block-start: var(--space-s);
padding-inline: var(--drawer-item-padding);
border-block-start: var(--border-width) solid var(--color-border);
color: var(--color-ivory-muted);
font-size: var(--text-xs);
}
.nav-menu-small {
gap: 0 var(--space-m);
}
.ftr {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 20;
padding-block: 0 var(--touch-safe-bottom);
padding-inline: var(--touch-edge);
}
.ftr-inner {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: var(--space-s);
min-block-size: var(--touch-footer-height);
max-inline-size: none;
}
.ftr .ftr-row[data-row="small"],
.ftr-item[data-row="main"]:not([data-touch-footer="show"]),
.ftr-status {
display: none;
}
.ftr-row[data-row="main"] {
flex-wrap: nowrap;
gap: var(--touch-footer-gap);
margin-inline-start: auto;
font-size: var(--touch-footer-text);
}
.ftr-row[data-row="main"] .ftr-item {
align-items: center;
min-block-size: var(--touch-target);
}
.ftr-link {
justify-content: center;
min-block-size: var(--touch-target);
min-inline-size: var(--touch-target);
white-space: nowrap;
}
.audio-sfx[data-variant="footer"] {
display: flex;
flex: none;
align-items: flex-start;
}
.audio-sfx[data-variant="footer"] .audio-toggle {
--tab-radius: calc(var(--tile-radius-ratio) * 2 * var(--touch-target));
inline-size: var(--touch-sfx-width);
block-size: var(--touch-target);
border-radius: 0;
border-end-start-radius: var(--tab-radius);
border-end-end-radius: var(--tab-radius);
background-image: linear-gradient(to top, var(--gold-top), var(--selector-icon) 55%, var(--color-gold-deep));
box-shadow: inset 0 calc(-1 * var(--lacquer-edge-width)) 0 var(--gold-tab-gloss), var(--tab-shadow);
}
.audio-sfx[data-variant="footer"] .audio-short {
display: inline;
}
.audio-sfx[data-variant="footer"] .audio-tip {
inset-block-start: auto;
inset-block-end: calc(100% + var(--space-xs));
inset-inline-start: 0;
inset-inline-end: auto;
}
}
@media (pointer: coarse) {
:root .home-stage,
:root .home-hint,
:root .home-badge {
display: none;
}
:root .home-section .home-list {
position: static;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--touch-grid-row-gap) var(--touch-grid-gap);
inline-size: 100%;
max-inline-size: calc(var(--home-grid-cols, var(--home-cols, 1)) * var(--touch-icon-size) + (var(--home-grid-cols, var(--home-cols, 1)) - 1) * var(--touch-grid-gap));
min-block-size: 0;
margin-inline: auto;
}
:root .home-section .home-item,
:root .home-section .home-item:not(.home-item-active) {
position: relative;
flex: none;
inline-size: var(--touch-icon-size);
block-size: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
:root .home-section .home-link.lacquer {
--lacquer-layer: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: var(--touch-name-gap);
min-block-size: 0;
padding: 0;
aspect-ratio: auto;
background: none;
box-shadow: none;
transform: none;
font-size: var(--touch-name-size);
font-weight: var(--font-weight-gold);
line-height: var(--leading-heading);
text-align: center;
text-decoration: none;
}
:root .home-section .home-link.lacquer::before,
:root .home-section .home-link.lacquer::after {
content: none;
}
:root .home-section .home-link-face {
position: relative;
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--touch-icon-size);
aspect-ratio: 1;
border-radius: calc(var(--tile-radius-ratio) * var(--touch-icon-size));
background-color: var(--lacquer-base);
background-image: linear-gradient(to bottom, var(--lacquer-gloss), var(--lacquer-base) var(--lacquer-gloss-stop));
box-shadow: var(--touch-icon-rim), inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--touch-icon-contact), var(--lacquer-shadow);
transform: perspective(var(--touch-icon-perspective)) rotateX(calc(-1 * var(--touch-icon-tilt)));
transform-origin: 50% 100%;
transition: transform var(--duration-icon-open) var(--ease-page-leave);
}
:root .home-section .home-link:active .home-link-face,
:root .home-section .home-link[data-state="opening"] .home-link-face {
box-shadow: var(--touch-icon-rim-active), inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--touch-icon-contact), var(--lacquer-shadow);
}
:root .home-section .home-link[data-state="opening"] .home-link-face {
transform: perspective(var(--touch-icon-perspective)) rotateX(0deg);
}
:root .home-section .home-link.lacquer:focus-visible {
outline: none;
box-shadow: none;
}
:root .home-section .home-link:focus-visible .home-link-face {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
:root .home-section .home-link:focus-visible .home-link-face,
:root .home-section .home-link:active .home-link-face {
background-image: linear-gradient(to bottom, var(--lacquer-gloss-hover), var(--lacquer-base) var(--lacquer-gloss-stop));
}
:root .home-section .home-link-icon {
display: block;
inline-size: calc(var(--touch-icon-size) * var(--touch-icon-glyph));
block-size: calc(var(--touch-icon-size) * var(--touch-icon-glyph));
}
:root .home-section .home-link-text {
display: block;
inline-size: calc(100% + var(--touch-grid-gap));
margin-inline: calc(-0.5 * var(--touch-grid-gap));
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
white-space: normal;
}
:root .home-section .home-link-badge {
--stamp-w: calc(var(--touch-icon-size) * var(--touch-stamp-share));
inset-block-start: calc(-1 * var(--touch-stamp-out));
inset-inline-end: calc(-1 * var(--touch-stamp-out));
}
}
@media (pointer: coarse) {
html::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--page-light-touch), var(--page-light-touch-floor);
}
.page,
.page:not([data-page="home"]) {
background-image: var(--pattern-page);
background-attachment: scroll;
background-size: var(--pattern-page-size);
}
.hdr,
.page:not([data-page="home"]) .hdr {
background-color: var(--color-bg);
background-image: var(--page-light-touch), var(--page-light-touch-floor);
background-attachment: scroll, scroll;
background-position: 0 0, 0 0;
background-size: 100vw 100dvh, 100vw 100dvh;
}
.ftr,
.page:not([data-page="home"]) .ftr {
background-color: var(--color-bg);
background-image: var(--footer-gloss), var(--page-light-touch), var(--page-light-touch-floor);
background-attachment: scroll, scroll, scroll;
background-position: 0 0, 0 100%, 0 100%;
background-size: auto, 100vw 100dvh, 100vw 100dvh;
}
}
@media (pointer: coarse) {
.page:not([data-page="home"]) .lacquer[data-lacquer="box"] {
animation-name: box-glow-follow;
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: view(block 0px);
animation-range: cover 0px cover 100vh;
animation-range: cover 0px cover 100dvh;
}
.page:not([data-page="home"]) .lacquer[data-lacquer="box"]::before {
background-image: var(--box-glow-touch), var(--gold-line);
background-attachment: scroll, scroll;
}
}
@media (pointer: coarse) {
html[data-arrive="cover"] .page::after {
content: "";
position: fixed;
inset: 0;
z-index: 1000;
background: var(--selector-tile);
opacity: 1;
}
}
@media (pointer: coarse) and (prefers-contrast: more) {
.audio-sfx[data-variant="footer"] .audio-toggle {
background-image: none;
background-color: var(--selector-icon);
}
html::before {
display: none;
}
.page:not([data-page="home"]) .lacquer[data-lacquer="box"]::before {
background-image: var(--gold-line);
}
.hdr,
.page:not([data-page="home"]) .hdr {
background-image: none;
}
.ftr,
.page:not([data-page="home"]) .ftr {
background-color: var(--selector-tile);
background-image: linear-gradient(to bottom, var(--lacquer-gloss), var(--selector-tile) 70%);
background-position: 0 0;
background-size: auto;
}
:root .home-section .home-link-face,
:root .home-section .home-link:active .home-link-face,
:root .home-section .home-link[data-state="opening"] .home-link-face {
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), var(--lacquer-shadow);
transform: none;
}
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
:root .home-section .home-link-face {
transition: none;
}
:root .home-section .home-link[data-state="opening"] .home-link-face {
transform: perspective(var(--touch-icon-perspective)) rotateX(calc(-1 * var(--touch-icon-tilt)));
}
}
@media (pointer: coarse) {
.form-radio,
.form-check {
inline-size: var(--touch-target);
block-size: var(--touch-target);
}
}