@font-face {
  font-family: Flexa;
  src: url('/fonts/overtime/gt-flexa-mono.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Financier;
  src: url('/fonts/overtime/financier-display-light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
:root {
  --blue: #3667ff;
  --paper: #fff;
  --rail: #f3f3f3;
  --stage: 75vw;
  --rail-size: 25vw;
  --row: 1.35rem;
  --ease: cubic-bezier(.22,.68,0,1);
  font-size: clamp(15px,1.15vw,19px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--blue); }
body {
  font-family: Flexa, monospace;
  font-size: .72rem;
  line-height: 1.4;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
body[data-page=work], body.lightbox-open { overflow: hidden; }
:root.dark { --paper: #101010; --rail: #191919; --blue: #8aa5ff; color-scheme: dark; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
}
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:hover { text-decoration: underline; text-underline-offset: .2em; }
button { transition: opacity .2s; }
button:hover { opacity: .55; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
h1:focus, main:focus { outline: none; }
p, h1, h2 { margin: 0; }
h1, h2 { font-weight: 400; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--paper); padding: 1rem; }
.skip-link:focus { top: 1rem; }

.site-header { position: fixed; inset: 0 auto auto 0; width: var(--stage); height: 4rem; z-index: 20; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.wordmark { position: absolute; top: .55rem; left: 1rem; font: 300 2rem/1 Financier,Georgia,serif; text-transform: none; white-space: nowrap; letter-spacing: -.025em; }
.wordmark:hover { text-decoration: none; }
.time-display { position: absolute; left: 50%; top: .85rem; transform: translateX(-50%); text-align: center; }
.time-label { display: block; margin-bottom: .3rem; font-size: .48rem; letter-spacing: .06em; opacity: .6; }
.digital-clock { font-size: .66rem; line-height: 1; font-variant-numeric: tabular-nums; }
.theme-toggle { position: absolute; right: .55rem; top: .55rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; }
.theme-toggle span { display: block; width: .45rem; height: .45rem; background: #111; }
.dark .theme-toggle span { background: #fff; }
.site-nav { position: fixed; top: 50%; left: 1rem; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; z-index: 25; gap: .18rem; font-size: .7rem; line-height: 1.25; }
.site-nav a { padding: .18rem .3rem; border: 1px solid transparent; border-radius: 2rem; margin-left: -.05rem; }
.site-nav a[aria-current], .site-nav a:hover { border-color: currentColor; text-decoration: none; }

.clock { position: fixed; top: 0; left: 0; width: var(--stage); height: 100svh; overflow: hidden; pointer-events: none; z-index: 2; }
.clock-face { position: absolute; width: var(--stage); height: var(--stage); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.hand { display: block; position: absolute; left: 50%; bottom: 50%; width: 1px; background: var(--blue); transform-origin: 50% 100%; transform: rotate(var(--angle,0deg)); }
.hour { height: 25%; width: 2px; margin-left: -1px; }
.minute { height: 35%; width: 2px; margin-left: -1px; }
.second { height: 80%; transition: transform .26s linear; }
.clock-splash { position: absolute; inset: 0; pointer-events: none; }
.clock-ripple { position: absolute; left: 50%; top: 50%; width: clamp(10rem,20vw,22rem); aspect-ratio: 1; border: 1px solid var(--blue); border-radius: 50%; opacity: 0; }
.clock-spark { position: absolute; left: 50%; top: 50%; width: 1px; height: .5rem; margin-left: -.5px; background: var(--blue); opacity: 0; }

.home-view { position: fixed; inset: 0; }
.introduction { position: absolute; bottom: 1.2rem; left: 1rem; max-width: 24rem; font-size: .62rem; line-height: 1.5; z-index: 4; }
.scroll-hint { position: absolute; bottom: 1.25rem; left: 39vw; font-size: .55rem; opacity: .65; z-index: 4; }
.scroll-hint span { margin-left: .5rem; }
.photo-rail { position: absolute; right: 0; top: 0; width: var(--rail-size); height: 100%; background: var(--rail); overflow: hidden; touch-action: pan-x; z-index: 1; }
.photo-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc((var(--position) + .5) * var(--rail-size) * -1)); transition: transform .85s var(--ease); }
.rail-photo { position: relative; display: block; width: 100%; height: var(--rail-size); overflow: hidden; user-select: none; }
.rail-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-label { position: absolute; inset: auto 1rem 1rem; color: #fff; opacity: 0; transition: opacity .2s; display: flex; justify-content: space-between; text-shadow: 0 1px 12px #000; }
.rail-photo:hover .photo-label, .rail-photo:focus-visible .photo-label { opacity: 1; }
.project-index { position: absolute; right: calc(var(--rail-size) + 1rem); top: 15%; height: 70%; width: 10rem; overflow: hidden; z-index: 5; mask-image: linear-gradient(transparent,#000 30%,#000 70%,transparent); }
.index-track { position: absolute; top: 50%; width: 100%; transform: translateY(calc((var(--position) + .5) * var(--row) * -1)); transition: transform .85s var(--ease); }
.index-item { height: var(--row); display: flex; align-items: center; position: relative; padding-left: .8rem; opacity: .4; white-space: nowrap; font-size: .7rem; line-height: 1; transition: opacity .2s; gap: .45rem; }
.index-item.is-selected { opacity: 1; }
:root.dark .index-item:not(.is-selected):not(:hover):not(:focus-visible) { opacity: .68; }
.index-item.is-selected:before { content: ''; position: absolute; left: 0; top: 50%; width: .35rem; height: .35rem; transform: translateY(-50%); background: currentColor; }
.index-item:hover, .index-item:focus-visible { opacity: 1; text-decoration: none; }
.index-arrow { opacity: 0; transform: translateX(-3px); transition: opacity .2s,transform .2s; }
.index-item:hover .index-arrow, .index-item:focus-visible .index-arrow { opacity: 1; transform: translateX(0); }
.is-resetting .index-track, .is-resetting .photo-track { transition: none; }
.work-controls { position: absolute; right: calc(var(--rail-size) + 1rem); bottom: .8rem; z-index: 5; min-width: 8rem; text-align: right; }
.current-project-link { font-size: .65rem; display: inline-block; margin-bottom: .25rem; }
.current-project-link span { margin-left: .4rem; }
.work-control-row { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }
.work-counter { font-size: .55rem; min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.work-control-row button { width: 1.5rem; height: 1.5rem; font-size: .9rem; }

.project-detail { position: fixed; left: 11rem; right: calc(var(--rail-size) + 3rem); top: 50%; transform: translateY(-50%); z-index: 30; background: var(--paper); padding: 1.5rem 0; }
.close-project { display: block; margin-bottom: 3rem; font-size: .65rem; padding-block: .5rem; }
.close-project span { margin-left: 1rem; }
.project-tag { font-size: .6rem; line-height: 1.5; margin-bottom: .85rem; }
.project-title { font: 300 3.5rem/1 Financier,Georgia,serif; text-transform: none; letter-spacing: -.03em; margin-bottom: 1.5rem; }
.project-description { font-size: .74rem; line-height: 1.75; max-width: 24rem; }
.project-visit { display: inline-block; margin-top: 2rem; border-bottom: 1px solid currentColor; padding-block: .3rem; }
.project-visit:hover { text-decoration: none; }
.project-pagination { display: flex; align-items: center; gap: 1.25rem; margin-top: 3rem; font-size: .6rem; }
.project-pagination button { font-size: 1rem; width: 2rem; height: 2rem; }
.project-open { --stage: 50vw; --rail-size: 50vw; }
.project-open .project-index, .project-open .introduction, .project-open .scroll-hint, .project-open .work-controls { display: none; }

body:not([data-page=work]) { --stage: 100vw; }
.page-view { position: relative; z-index: 3; min-height: 100svh; }
.section-heading { margin-bottom: 3.5rem; }
.section-heading h1, .about-content h1 { font: 300 3.25rem/1.02 Financier,Georgia,serif; text-transform: none; letter-spacing: -.025em; }
.section-heading p { margin-top: 1rem; font-size: .6rem; line-height: 1.6; }
.gallery-view { padding: 8.5rem 4rem 3rem 32vw; }
.photo-grid { columns: 3; column-gap: 1.5rem; }
.gallery-photo { display: block; break-inside: avoid; margin-bottom: 2rem; }
.gallery-photo img { display: block; width: 100%; height: auto; background: var(--rail); transition: filter .3s; }
.gallery-photo:hover img { filter: brightness(.92); }
.gallery-photo span { display: block; font-size: .55rem; margin-top: .65rem; opacity: .7; }
.gallery-photo:hover { text-decoration: none; }
.page-end { font-size: .6rem; margin-top: 4rem; }
.about-content { position: relative; margin-left: 48%; padding: 36vh 3rem 5rem 0; }
.about-content h1 { margin-bottom: 2.75rem; }
.about-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.75rem; font-size: .68rem; line-height: 1.7; }
.about-columns p { margin-bottom: 1.5rem; }
.about-columns a { line-height: 1.9; }
.about-columns p a { text-decoration: underline; text-underline-offset: .2em; }
.list-view { padding: 8.5rem 8vw 4rem 42vw; }
.editorial-list article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid color-mix(in srgb,var(--blue) 24%,transparent); }
.list-number { font-size: .55rem; padding-top: .25rem; opacity: .6; }
.editorial-list h2 { font-size: .85rem; line-height: 1.5; }
.editorial-list p { font-size: .68rem; line-height: 1.65; margin-top: .65rem; max-width: 32rem; opacity: .8; }
.editorial-list h2 a { display: block; }
.editorial-list h2 span { white-space: nowrap; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; line-height: 1.8; }

.lightbox { background: var(--paper); color: var(--blue); border: none; position: fixed; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 4rem; z-index: 100; }
.lightbox::backdrop { background: var(--paper); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; }
.lightbox-close { position: absolute; top: .75rem; right: 1rem; padding: .5rem; }
.lightbox-image { min-height: 0; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-image img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-controls { display: flex; align-items: center; justify-content: space-between; max-width: 45rem; width: 100%; gap: 2rem; margin-top: 1.5rem; font-size: .65rem; }
.lightbox-controls p { text-align: center; line-height: 1.6; }
.lightbox-controls button { padding: .5rem; min-width: 2.5rem; min-height: 2.5rem; font-size: 1rem; }

@media (max-width: 1100px) {
  .scroll-hint { display: none; }
  .project-index { width: 9.5rem; }
  .project-detail { left: 8rem; right: calc(var(--rail-size) + 2rem); }
  .about-content { margin-left: 35%; padding-right: 2rem; }
  .about-columns { grid-template-columns: repeat(2,minmax(0,1fr)); font-size: .7rem; }
  .gallery-view { padding-left: 22vw; padding-right: 2rem; }
  .list-view { padding-left: 30vw; padding-right: 2rem; }
}
@media (max-width: 767px) {
  :root { font-size: 16px; --stage: 50vw; --rail-size: 50vw; --row: 1.65rem; }
  .site-header { width: 100%; height: 5.5rem; background: linear-gradient(var(--paper) 60%,transparent); }
  .wordmark { top: .8rem; left: 1rem; font-size: 1.8rem; }
  .time-display { display: none; }
  .theme-toggle { display: grid; left: .75rem; right: auto; top: 3rem; width: 2rem; height: 2rem; }
  .site-nav { top: .7rem; right: 1rem; left: auto; transform: none; align-items: flex-end; gap: .1rem; font-size: .65rem; }
  .site-nav a { padding: .2rem .3rem; }
  .clock { width: 100%; z-index: 3; }
  .clock-face { width: 100vw; height: 100vw; }
  .hour { height: 53%; width: 1.5px; }
  .minute { height: 75%; width: 1.5px; }
  .second { height: 130%; }
  .project-index { left: .35rem; right: auto; width: calc(50vw - 1rem); top: 16%; height: 66%; }
  .index-item { font-size: .7rem; padding-left: .65rem; gap: .3rem; }
  .index-item span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .index-arrow { display: none; }
  .introduction, .scroll-hint { display: none; }
  .work-controls { left: 1rem; right: calc(50vw + 1rem); bottom: max(1rem,env(safe-area-inset-bottom)); min-width: 0; text-align: left; }
  .current-project-link { font-size: .62rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .work-control-row { justify-content: space-between; gap: .3rem; }
  .work-control-row button { width: 2.5rem; height: 2.5rem; }
  .work-control-row button:first-child { margin-left: -.6rem; }
  .photo-label { font-size: .6rem; inset: auto .65rem .65rem; }
  .project-open { --stage: 50vw; --rail-size: 50vw; }
  .project-open .project-detail { left: 0; right: 0; top: auto; bottom: 0; transform: none; padding: 1rem 1.25rem max(1rem,env(safe-area-inset-bottom)); max-height: 72svh; overflow: auto; box-shadow: 0 -1px 0 color-mix(in srgb,var(--blue) 15%,transparent); }
  .project-title { font-size: 2.8rem; margin-bottom: 1rem; }
  .close-project { margin-bottom: 1.25rem; }
  .project-description { max-width: 28rem; font-size: .72rem; line-height: 1.75; }
  .project-visit { margin-top: 1.25rem; font-size: .68rem; }
  .project-pagination { margin-top: 1.25rem; justify-content: space-between; }
  .project-tag { font-size: .6rem; }
  .page-view { background: var(--paper); }
  body:not([data-page=work]) .clock { opacity: .1; z-index: 4; }
  .gallery-view { padding: 8rem 1rem 3rem; }
  .section-heading { margin-bottom: 2.5rem; }
  .section-heading h1, .about-content h1 { font-size: 2.8rem; }
  .section-heading p { font-size: .6rem; line-height: 1.6; max-width: 20rem; }
  .photo-grid { columns: 2; column-gap: 1rem; }
  .gallery-photo { margin-bottom: 1.5rem; }
  .page-end { margin-top: 3rem; }
  .about-content { margin-left: 0; padding: 9rem 1.25rem 4rem; }
  .about-content h1 { margin-bottom: 2.5rem; }
  .about-columns { grid-template-columns: 1fr; gap: 1rem; max-width: 29rem; font-size: .75rem; line-height: 1.8; }
  .about-columns p { margin-bottom: 1.25rem; }
  .list-view { padding: 8rem 1.25rem 3rem; }
  .editorial-list article { grid-template-columns: 1rem 1fr; gap: 1rem; padding: 1.25rem 0; }
  .editorial-list h2 { font-size: .8rem; }
  .editorial-list p { font-size: .7rem; }
  .lightbox { padding: 4rem 1rem max(1rem,env(safe-area-inset-bottom)); }
  .lightbox-controls { gap: .4rem; font-size: .6rem; margin-top: 1rem; }
  .contact-links { font-size: .72rem; }
}
@media (max-height: 600px) and (max-width: 767px) {
  .project-index { top: 18%; height: 58%; }
  .work-controls { bottom: .5rem; }
  .current-project-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}