@font-face { font-family: 'Archivo'; src: url('fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('fonts/newsreader-300.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }
/* Layout: white pages opened by moving edges, a black menu and a black footer behind them. Very large or very small type, nothing between. */
:root {
  --paper: #FFFFFF; --ink: #0A0A0A; --grey: #767676; --line: #D9D9D9; --on-ink-soft: #8C8C8C;
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --g: clamp(16px, 3vw, 48px); --gap: clamp(14px, 2vw, 32px); --pin-gap: clamp(10px, 1.7vw, 34px);
  --small: .8125rem; --mid: clamp(1.375rem, 2.5vw, 2.5rem); --big: clamp(2rem, 7.4vw, 8.5rem);
  --cubic: cubic-bezier(.65, 0, .35, 1); --cubic-out: cubic-bezier(.33, 1, .68, 1);
}
html { background: var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { background: var(--ink); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { all: unset; cursor: pointer; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; padding: 0; } ul { list-style: none; } i { font-style: normal; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.pad { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); }
.small { font-size: var(--small); letter-spacing: .01em; line-height: 1.4; }
.soft { color: var(--grey); }
.big { font-size: var(--big); font-weight: 300; font-stretch: 112%; line-height: 1.02; letter-spacing: -.022em; }
.mid { font-size: var(--mid); font-weight: 300; font-stretch: 112%; line-height: 1.16; letter-spacing: -.012em; text-wrap: pretty; }
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: block; }

.head { position: fixed; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: calc(env(safe-area-inset-top, 0px) + clamp(18px, 2vw, 34px)) clamp(12px, 1.2vw, 20px); background: var(--paper); transition: transform .8s var(--cubic), background-color .5s var(--cubic), color .5s var(--cubic); }
.head[data-hide="true"] { transform: translateY(-101%); }
.head[data-dark="true"] { background: var(--ink); color: var(--paper); }
.head .logo svg, .panel-head .logo svg { display: block; height: 72px; width: auto; fill: currentColor; overflow: visible; }
.pen path { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.head-right { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.roll { display: inline-block; line-height: 1.5; font-size: .9375rem; letter-spacing: .005em; vertical-align: top; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size .7s var(--cubic); }
a:hover > .roll, button:hover > .roll, a:focus-visible > .roll, button:focus-visible > .roll, .close-in:hover .roll { background-position: 0 100%; background-size: 100% 1px; }
.back[hidden] { display: none; }
.logo:hover { opacity: 1; }

.curtain { position: fixed; inset: 0; z-index: 9; background: var(--paper); }
html.intro { overflow: hidden; }
#film { position: fixed; inset: 0; z-index: 40; background: #000; isolation: isolate; }
#film canvas { display: block; width: 100%; height: 100%; }
#film i { position: absolute; inset: 0; background: #fff; mix-blend-mode: difference; clip-path: inset(100% 0 0 0); }

#page { position: relative; z-index: 1; background: var(--paper); }
#home { padding-top: clamp(120px, 15vw, 220px); }
.hello { padding-bottom: clamp(56px, 8vw, 120px); }
.pins { columns: 4; column-gap: var(--gap); padding-bottom: clamp(72px, 10vw, 160px); }
.pins.on { columns: auto; display: flex; align-items: flex-start; gap: var(--pin-gap); }
.col { flex: 1 1 0; min-width: 0; display: grid; row-gap: var(--pin-gap); }
.pin { display: block; position: relative; break-inside: avoid; }
.pins:not(.on) .pin { margin-bottom: var(--gap); }
.frame { display: block; overflow: hidden; background: #EFEFEF; position: relative; }
/* Photographs are black and white until you reach for them: the grey layer lifts away from its lower edge. */
.frame img.tone { position: absolute; inset: 0; }
.tone, .fly-tone { --x: 50%; --y: 50%; --r: -200px; filter: grayscale(1); }
.tone.bloom, .fly-tone {
  -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 200px));
  mask-image: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 200px)); }

.frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.5s var(--cubic-out); }
.pin:hover .frame img, .pin:focus-visible .frame img { scale: 1.045; }
.cap { position: absolute; inset: auto 0 0; display: block; overflow: hidden; padding: 44px 12px 10px; font-size: var(--small); line-height: 1.4; color: #fff; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); opacity: 0; transition: opacity .7s var(--cubic); }
.cap > span { display: flex; justify-content: space-between; gap: 12px; transform: translateY(8px); transition: transform .8s var(--cubic); }
.pin:hover .cap, .pin:focus-visible .cap { opacity: 1; }
.pin:hover .cap > span, .pin:focus-visible .cap > span { transform: none; }
@media (hover: none) { .cap { display: none; } }
.cap i { color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }

.studio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: clamp(56px, 8vw, 130px) clamp(90px, 13vw, 210px); border-top: 1px solid var(--line); }
.studio h2 { grid-column: 1 / 5; font-size: var(--small); font-weight: 400; }
.studio p { grid-column: 5 / -1; max-width: 26em; }

.sheet { position: fixed; inset: 0; z-index: 7; background: var(--paper); }
.fly { position: fixed; z-index: 8; overflow: hidden; will-change: transform; }
.fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); padding-top: var(--head-h, 80px); padding-bottom: clamp(56px, 8vw, 130px); }
.p-frame { display: block; overflow: hidden; align-self: start; background: #EFEFEF; }
.p-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-head { align-self: end; min-width: 0; padding-right: var(--gap); }
.p-facts { display: grid; row-gap: 22px; padding-top: 24px; max-width: 30em; }
.p-facts dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 3px 12px; align-content: start; }
.p-facts dt { color: var(--grey); }
.p-imgs { display: flex; align-items: flex-start; gap: var(--pin-gap); padding-bottom: clamp(80px, 11vw, 180px); }
.p-col { flex: 1 1 0; min-width: 0; display: grid; row-gap: var(--pin-gap); }
.p-col figure { margin: 0; }
.p-next { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 20vw, 320px); align-items: end; gap: var(--gap); padding-block: clamp(36px, 5vw, 72px) clamp(70px, 9vw, 140px); border-top: 1px solid var(--line); min-width: 0; }
.p-next .name { display: block; margin-top: 12px; overflow-wrap: anywhere; }
.p-next .name span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 1s var(--cubic); }
.p-next:hover .name span, .p-next:focus-visible .name span { background-size: 100% 1px; }
.p-next .frame { aspect-ratio: 4 / 3; }
.p-next:hover .frame img { scale: 1.045; }

.foot { position: relative; z-index: 0; background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 110px) calc(env(safe-area-inset-bottom, 0px) + 22px); overflow: hidden; }
.foot .label { color: var(--on-ink-soft); margin-bottom: 14px; }
.mail.big { font-size: 5.9vw; white-space: nowrap; }
.mail { display: inline; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 1s var(--cubic); }
.mail:hover, .mail:focus-visible { background-size: 100% 1px; }
.word { display: block; overflow: hidden; margin-top: clamp(56px, 9vw, 150px); white-space: nowrap; font-weight: 300; font-stretch: 112%; line-height: .98; letter-spacing: -.035em; }
.word > span { display: inline-block; }
.foot-row { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 18px; color: var(--on-ink-soft); }

.panel { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); overflow: hidden; }
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: calc(env(safe-area-inset-top, 0px) + clamp(18px, 2vw, 34px)) clamp(12px, 1.2vw, 20px); }
.panel-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(29vw, 54vh); gap: var(--gap); align-items: end; padding-block: 12px clamp(20px, 3vw, 44px); }
.links { min-width: 0; }
.links li { position: relative; }
.links li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #3A3A3A; transform: scaleX(var(--rule, 1)); transform-origin: var(--ro, left); }
.links a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: .1em .14em; font-size: min(10.4vw, 17.5vh); font-weight: 300; font-stretch: 112%; line-height: 1.06; letter-spacing: -.028em; transition: color .7s var(--cubic-out), transform .9s var(--cubic); }
.links .small { letter-spacing: .01em; font-stretch: 100%; font-weight: 400; color: var(--on-ink-soft); }
.links:has(a:hover) a:not(:hover) { color: #565656; }
@media (hover: hover) { .links a:hover { transform: translateX(clamp(12px, 2vw, 32px)); } }
.window { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.panel-foot { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-block: 0 calc(env(safe-area-inset-bottom, 0px) + 22px); color: var(--on-ink-soft); }
.panel-foot a { color: var(--paper); }

@media (max-width: 1000px) { .pins { columns: 3; } }
@media (max-width: 640px) {
  :root { --big: 9vw; }
  .pins { columns: 2; }
  .head .logo svg, .panel-head .logo svg { height: 52px; }
  .panel-body { grid-template-columns: minmax(0, 1fr); align-content: end; }
  .window { display: none; }
  .links a { font-size: 17vw; }
  .studio h2, .studio p { grid-column: 1 / -1; }
  .studio h2 { margin-bottom: 18px; }
}
/* Quiet type: small, even text, so the photographs carry the page. */
html.quiet { --big: clamp(1.25rem, 1.75vw, 1.625rem); --mid: clamp(1.25rem, 1.75vw, 1.625rem); }
html.quiet .big, html.quiet .mid { font-weight: 400; letter-spacing: -.005em; line-height: 1.25; }
html.quiet #home { padding-top: clamp(112px, 9.5vw, 156px); }
html.quiet .hello { padding-bottom: clamp(32px, 4vw, 72px); }
html.quiet .mail.big { font-size: var(--big); }
html.quiet .word { display: none; }
html.quiet .foot-row { padding-top: clamp(72px, 10vw, 150px); }
html.quiet .links a { font-size: clamp(1.75rem, 3.4vw, 3.25rem); font-weight: 400; line-height: 1.2; letter-spacing: -.012em; padding-block: .32em .36em; }
html.quiet .p-next .name { margin-top: 6px; }
/* Preview only: font pairings for the larger text. Small labels and the logo stay in Archivo. */
html[data-font="news"] .big, html[data-font="news"] .mid, html[data-font="news"] .links a { font-family: 'Newsreader', Georgia, serif; font-stretch: 100%; font-weight: 300; letter-spacing: -.012em; }
html[data-font="news"] { --big: clamp(1.5rem, 2.15vw, 2rem); --mid: clamp(1.5rem, 2.15vw, 2rem); }

@media (max-width: 760px) {
  .p-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .p-frame { order: -1; }
  .p-head { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* Bigger menu text; moving text and walls keep one steady GPU layer, so they never change sharpness mid-way. */
.head-right, .panel-head button { font-size: 1rem; }
.sheet, .curtain { will-change: transform; }

/* The page's width never changes. A browser scrollbar that hides while scrolling is locked shifts everything sideways,
   so the bar itself stays out of the layout; wheel, touch, keyboard and trackpad scrolling are untouched. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }


/* Contact */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 130px); }
.contact h2 { margin: 0 0 clamp(28px, 3vw, 44px); font-weight: 400; }
#ffForm { display: grid; row-gap: 26px; align-content: start; }
#ffForm label { display: grid; row-gap: 8px; color: var(--on-ink-soft); }
#ffForm input, #ffForm textarea { width: 100%; box-sizing: border-box; padding: 0 0 10px; border: 0; border-bottom: 1px solid #444; border-radius: 0; background: none; color: var(--paper); font: inherit; font-size: 1rem; outline: 0; resize: vertical; transition: border-color .6s var(--cubic); }
#ffForm input:focus, #ffForm textarea:focus { border-color: var(--paper); }
#ffForm .hp { position: absolute; left: -9999px; }
#ffForm .send { display: flex; align-items: center; gap: 24px; }
#ffForm button { color: var(--paper); font-size: 1rem; }
#ffForm button[disabled] { opacity: .5; }
#ffNote { color: var(--on-ink-soft); }
#ffForm.sent > label, #ffForm.sent button { display: none; }
#ffForm.sent #ffNote { color: var(--paper); font-size: 1.25rem; }
.c-map { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a1a; }
.c-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.92); transition: filter 1.2s var(--cubic); }
.c-map:hover iframe { filter: none; }
.c-map { cursor: pointer; }
.c-map iframe { pointer-events: none; }
.c-map.on iframe { pointer-events: auto; }
.c-where { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 16px; }
.c-where a { color: var(--paper); }
@media (max-width: 760px) { .contact { grid-template-columns: minmax(0, 1fr); } }

h1:focus { outline: 0; }
input:-webkit-autofill, textarea:-webkit-autofill { -webkit-text-fill-color: var(--paper); box-shadow: 0 0 0 100px var(--ink) inset; caret-color: var(--paper); }
/* Plain pages: privacy policy, page not found */
.simple { min-height: 100vh; background: var(--paper); padding-block: clamp(140px, 14vw, 200px) clamp(80px, 10vw, 160px); }
.simple h1 { margin: 0 0 clamp(28px, 3vw, 44px); }
.simple .copy { max-width: 42em; line-height: 1.6; }
.simple .copy p, .simple .copy ul { margin: 0 0 1.2em; }
.simple .copy h2 { margin: 2em 0 .6em; font-size: 1.125rem; font-weight: 400; }
.simple .copy a { text-decoration: underline; text-underline-offset: 3px; }
.head-right a { color: inherit; }

.c-privacy { margin: 0; color: var(--on-ink-soft); }
.c-privacy a, .foot-row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.p-imgs > figure { flex: 1 1 30%; margin: 0; }
.hello { margin: 0; }

/* The header stays on one line on every screen. */
.head-right, .head-right a, .head-right button { white-space: nowrap; flex-shrink: 0; }
.head .logo { min-width: 0; }
.back-short { display: none; }
@media (max-width: 520px) {
  .back-long { display: none; }
  .back-short { display: inline; }
  .head-right { gap: 18px; }
}
@media (max-width: 350px) {
  .head .logo svg, .panel-head .logo svg { height: 44px; }
}