@font-face { font-family: "Instrument Serif"; src: url("assets/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --ease-io: cubic-bezier(0.77, 0, 0.175, 1); --ink: #1f2326; --wall: #efebe4; --sig: #46634b; --pop: #f0715c; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); color-scheme: light; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #d9d4cb; color: var(--ink); font: 15px/1.4 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* The frame is the screen we are designing for: full window for web, a phone for mobile */
.frame { position: fixed; inset: 0; overflow: clip; background: var(--wall); container-type: size; }
.phone .frame { inset: auto; left: 50%; top: calc(50% - 30px); width: 390px; height: 844px; translate: -50% -50%; scale: min(1, calc((100vh - 110px) / 844px)); border-radius: 34px; box-shadow: 0 0 0 10px #1c1b19, 0 30px 60px -20px rgb(0 0 0 / .5); }
.room { position: absolute; transform-origin: 0 0; }
.room > img.plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

/* Window: city views behind the glass, cut by the detected sky mask */
.window { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.window img { position: absolute; object-fit: cover; opacity: 0; transition: opacity 1600ms ease; }
.window img.on { opacity: 1; }
/* Light of each place over the whole room */
.light { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1600ms ease, background 1600ms ease; }
.light.nuremberg { opacity: 1; background: linear-gradient(180deg, rgb(150 160 175 / .22), rgb(120 128 140 / .16)); mix-blend-mode: multiply; }
.light.berlin { opacity: 1; background: radial-gradient(90% 90% at 8% 30%, rgb(255 160 90 / .28), rgb(255 140 90 / .08) 70%); mix-blend-mode: soft-light; }
.place { position: absolute; pointer-events: none; padding: .3em .7em; border-radius: 99px; background: rgb(255 255 255 / .85); font-size: calc(var(--k, 1) * 13px); font-weight: 600; box-shadow: 0 2px 8px -3px rgb(0 0 0 / .3); transition: opacity 400ms ease; }

/* Objects: x = centre, y = bottom, w = width, all in % of the room */
.obj { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); width: calc(var(--w) * 1%); translate: -50% 0; z-index: var(--z, 1); touch-action: none; }
.obj img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 .25em .35em rgb(60 45 30 / .25)); }
.obj::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -3%; height: 9%; max-height: 18px; border-radius: 50%; background: rgb(60 45 30 / .28); filter: blur(5px); }
.obj.finger::before { bottom: 8%; }
.editing .obj { cursor: grab; }
.editing .obj:active { cursor: grabbing; }
.editing .obj.sel { outline: 2px dashed rgb(31 35 38 / .55); outline-offset: 4px; border-radius: 4px; }
.obj .h { display: none; position: absolute; right: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ink); cursor: nwse-resize; }
.editing .obj.sel .h { display: block; }
.view-mode .obj:hover { translate: -50% -3%; transition: translate 200ms var(--ease-out); }

/* On the wall: taped up like a trophy, with a cast shadow instead of a desk contact shadow */
.obj.on-wall::before { display: none; }
.obj.on-wall img { filter: drop-shadow(.35em .55em .5em rgb(60 45 30 / .28)); }
.obj.on-wall .tape { display: block; }
.tape { display: none; position: absolute; top: -2.5%; width: 34%; height: 5.5%; background: rgb(244 238 222 / .82); box-shadow: 0 1px 2px rgb(0 0 0 / .12); z-index: 2; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0 2%, #000 2% 98%, transparent 98%); }
.tape.l { left: -6%; rotate: -24deg; } .tape.r { right: -6%; rotate: 22deg; }
/* Other objects are fixed: only the board moves */
.editing .obj:not(.placa) { pointer-events: none; }
/* Board anchored to the text block instead of the room, so it stays beside the words on any screen */
.obj.in-head { left: calc(var(--hx) * 1em); top: calc(var(--hy) * 1em); bottom: auto; width: calc(var(--hw) * 1em); translate: -50% 0; }
.obj.on-wall:not(.m-tape) .tape { display: none; }
.pin { display: none; position: absolute; left: 50%; top: -3%; width: 20%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #ffb3a6, #f0715c 45%, #b9442f); filter: drop-shadow(calc(var(--k, 1) * 1.5px) calc(var(--k, 1) * 3px) calc(var(--k, 1) * 2px) rgb(40 25 15 / .35)); }
.obj.on-wall.m-pin .pin { display: block; }
.mat { display: none; position: absolute; inset: -6% -12% -4% -12%; z-index: -1; border-radius: 2px; background: #f7f2e8;
  box-shadow: 0 0 0 calc(var(--k, 1) * 3.5px) #3b342d, calc(var(--k, 1) * 3px) calc(var(--k, 1) * 7px) calc(var(--k, 1) * 12px) rgb(60 45 30 / .32); }
.obj.on-wall.m-frame .mat { display: block; }
.obj.on-wall.m-frame img { filter: drop-shadow(0 calc(var(--k, 1) * 1px) calc(var(--k, 1) * 1.5px) rgb(60 45 30 / .25)); }
.lbl { display: none; position: absolute; left: 50%; top: 100%; translate: -50% 0; margin-top: .55em; white-space: nowrap; font: 500 calc(var(--k, 1) * 11px)/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: .06em; color: rgb(31 35 38 / .62); pointer-events: none; }
.obj.on-wall.m-frame .lbl { margin-top: 1.4em; }
.obj.has-lbl .lbl { display: block; }
.ping { fill: none; stroke: #fafafa; stroke-width: 5; opacity: 0; }
.view-mode .obj.placa { cursor: pointer; }
/* Board options panel */
.pp { position: fixed; left: 12px; top: 12px; z-index: 50; width: min(19rem, calc(100vw - 24px)); padding: .75rem .8rem .7rem; border-radius: 14px; background: rgb(255 255 255 / .94); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .45); font-size: .8rem; }
.pp strong { display: block; font-size: .92rem; margin-bottom: .45rem; }
.pp .row { display: grid; gap: .25rem; margin-top: .5rem; }
.pp .row > span { font-weight: 600; color: rgb(31 35 38 / .7); }
.pp .seg { display: flex; flex-wrap: wrap; gap: .25rem; }
.pp .seg button { padding: .3rem .55rem; border-radius: 8px; background: #efebe4; font-weight: 600; font-size: .78rem; transition: transform 140ms var(--ease-out), background 160ms ease; }
.pp .seg button:active { transform: scale(.96); }
.pp .seg button[aria-pressed="true"] { background: #1f2326; color: #f4f2ee; }
.pp p { margin: .6rem 0 0; color: rgb(31 35 38 / .6); }
.view-mode .pp { opacity: .25; } .view-mode .pp:hover { opacity: 1; }
/* Meter overlay */
.obj svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.seg { fill: #ff3b2f; opacity: .07; } .seg.on { opacity: 1; filter: drop-shadow(0 0 3px rgb(255 60 40 / .85)); }
.lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }

/* Camera: room + text zoom together toward the chosen object */
.cam { position: absolute; inset: 0; transform-origin: 0 0; }
.cam.moving { transition: transform 720ms var(--ease-io); }
.zoomed .head { opacity: 0; transition: opacity 180ms ease; }
.head { transition: opacity 260ms ease 420ms; }
.view-mode .obj[data-world] { cursor: pointer; }
.view-mode .obj[data-world]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }
/* World: grows out of the object as a circle, in that world's own colours */
.immerse { position: absolute; inset: 0; z-index: 30; background: var(--wbg); color: var(--wfg); clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 420ms var(--ease-io); pointer-events: none; container-type: size; }
.immerse.on { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); transition: clip-path 760ms var(--ease-out) 380ms; pointer-events: auto; }
.immerse::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.hero { position: absolute; left: 50%; top: 33%; width: min(58cqw, 30cqh); translate: -50% -50%; opacity: 0; scale: .92; transition: opacity 200ms ease, scale 300ms var(--ease-out); }
.hero img { display: block; width: 100%; filter: drop-shadow(0 18px 26px rgb(0 0 0 / .28)); position: relative; }
.hero.wide { width: min(78cqw, 34cqh); }
.hero.small { top: 17.5%; width: min(24cqw, 12.5cqh); }
.hero.lit::before { content: ""; position: absolute; left: 50%; top: 56%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgb(255 205 120 / .34), transparent 62%); }
.immerse.on .hero { opacity: 1; scale: 1; transition: opacity 280ms ease 640ms, scale 560ms var(--ease-out) 640ms; }
.panel { position: absolute; left: max(1.4rem, 6cqw); right: max(1.4rem, 6cqw); bottom: max(2rem, 8cqh); max-width: 30rem; opacity: 0; transform: translateY(14px); transition: opacity 200ms ease, transform 300ms var(--ease-out); }
.immerse.on .panel { opacity: 1; transform: none; transition: opacity 280ms ease 700ms, transform 560ms var(--ease-out) 700ms; }
.panel .k { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.panel h2 { margin: .35rem 0 0; font: 400 clamp(2.2rem, 1.6rem + 3cqw, 4rem)/1 "Instrument Serif", Georgia, serif; letter-spacing: -0.015em; color: var(--wa); text-wrap: balance; }
.panel p { margin: .8rem 0 0; font-size: clamp(1rem, .92rem + .35cqw, 1.2rem); line-height: 1.45; max-width: 34ch; text-wrap: pretty; }
.panel ol { list-style: none; counter-reset: n; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; max-width: 36ch; }
.panel li { counter-increment: n; display: grid; grid-template-columns: 1.7rem 1fr; align-items: baseline; font-size: clamp(.95rem, .9rem + .25cqw, 1.08rem); line-height: 1.4; }
.panel li::before { content: counter(n); font: 400 1.25rem/1 "Instrument Serif", Georgia, serif; color: var(--wa); opacity: .85; }
.panel .ld { margin-top: 1.1rem; font-weight: 600; font-size: .9rem; opacity: .85; }
.panel .ld + ol { margin-top: .55rem; }
.prods { margin: 1.2rem 0 0; display: grid; gap: .8rem; max-width: 38ch; }
.prods div { display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; align-items: baseline; padding-top: .8rem; border-top: 1px solid color-mix(in oklch, currentColor 18%, transparent); }
.prods dt { font: 400 1.35rem/1 "Instrument Serif", Georgia, serif; }
.prods dd { margin: 0; font-size: clamp(.92rem, .88rem + .2cqw, 1.02rem); line-height: 1.4; opacity: .88; }
.panel .team { margin-top: 1rem; font-size: .95rem; line-height: 1.45; max-width: 38ch; }
.panel .team a { display: inline; margin: 0; color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.panel .nt { margin-top: 1rem; font-size: .9rem; opacity: .8; }
.panel .acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.3rem; }
.panel .acts a { margin: 0; }
.panel a.go { padding: .55rem 1.15rem; border-radius: 99px; background: var(--wbtn); color: var(--wbtnfg); text-decoration: none; transition: transform 140ms var(--ease-out); }
.panel a.go:active { transform: scale(.97); }
.panel a { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--wa); text-decoration-thickness: 2px; text-underline-offset: .22em; }
@container (min-aspect-ratio: 1/1) {
  .hero, .hero.small { left: 68%; top: 50%; width: 30cqh; } .hero.wide { width: 52cqh; }
  .panel { bottom: auto; top: 50%; translate: 0 -50%; left: 9cqw; max-width: 27rem; }
}
/* Portrait: the world is a scrollable column (object, then text), so nothing overlaps on short screens */
/* Only the content scrolls: background and grain stay put behind it */
.scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@container (max-aspect-ratio: 1/1) {
  .hero, .hero.small, .hero.wide { position: relative; left: auto; top: auto; translate: none; margin: max(4.4rem, 9cqh) auto 0; }
  .hero { width: min(52cqw, 26cqh); } .hero.wide { width: min(74cqw, 32cqh); } .hero.small { width: min(30cqw, 17cqh); }
  .panel { position: relative; left: auto; right: auto; bottom: auto; margin: 1.6rem max(1.4rem, 6cqw) 2.6rem; }
}
.back { position: absolute; z-index: 31; top: max(1rem, 3.5cqh); left: max(1rem, 4cqw); display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .85rem .45rem .6rem; border-radius: 99px; background: rgb(255 255 255 / .92); color: #1c1b19; font-size: .85rem; font-weight: 600;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 4px 12px -6px rgb(0 0 0 / .3); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 200ms ease, transform 260ms var(--ease-out); }
.back.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 700ms; }
.back:active { transform: scale(.97); transition-delay: 0ms; }
.back svg { width: .95rem; height: .95rem; }
.clean .bar, .clean .pp { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cam.moving { transition: none; }
  .immerse, .immerse.on { transition: clip-path 1ms; }
  .hero, .panel, .back { transition: opacity 150ms ease !important; transform: none !important; scale: 1 !important; }
}
/* Language switch: top right of the wall on web, in the desk-front footer on phones */
.lang { position: absolute; z-index: 21; right: 4.5cqw; top: 2.6cqh; display: flex; gap: .15rem; padding: .18rem; border-radius: 99px; background: rgb(255 255 255 / .55); font-size: .82rem; font-weight: 600; }
.lang button { padding: .22rem .5rem; border-radius: 99px; opacity: .55; transition: opacity 160ms ease, background 160ms ease; }
.lang button[aria-pressed="true"] { opacity: 1; background: var(--ink); color: var(--wall); }
.zoomed .lang { opacity: 0; pointer-events: none; }
.foot { display: none; }
.phone .foot { display: flex; position: absolute; z-index: 21; left: 22px; right: 18px; bottom: 16px; align-items: end; justify-content: space-between; gap: .6rem; font-size: .84rem; }
.phone .foot .meta { display: grid; margin: 0; gap: .2rem; }
.phone .cta { margin-top: .8rem; }
.phone .foot .lang { position: static; background: rgb(255 255 255 / .6); }
.zoomed .foot { opacity: 0; pointer-events: none; }
/* Invisible floats that make the intro wrap around a board taped beside it, in any language */
.head h1 .fl0 { float: right; width: 0; } .head h1 .fl1 { float: right; clear: right; }
/* Text block on the wall */
.head { position: absolute; z-index: 20; max-width: 30ch; pointer-events: none; }
.head * { pointer-events: auto; }
.firma { width: clamp(12.5rem, 21cqw, 21rem); aspect-ratio: 2750 / 979; background: var(--sig); -webkit-mask: url("assets/plates/firma-1400.png") left center / contain no-repeat; mask: url("assets/plates/firma-1400.png") left center / contain no-repeat; }
.head h1 { margin: .5rem 0 0; font: 400 clamp(1.6rem, 1.1rem + 1.3cqw, 2.6rem)/1.12 "Instrument Serif", Georgia, serif; text-wrap: pretty; }
.cta { display: inline-block; margin-top: 1rem; padding: .62rem 1.25rem; border-radius: 99px; background: var(--ink); color: var(--wall); font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: inset 0 -2px 0 var(--pop); }
.meta { margin: 1rem 0 0; font-size: .92rem; display: grid; gap: .3rem; }
.meta a { color: inherit; font-weight: 600; text-decoration-color: var(--pop); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.meta .st { display: inline-flex; align-items: center; gap: .4rem; } .meta .st i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--pop); }
.web .head { right: 4.5cqw; top: 7cqh; width: min(27rem, 36cqw); font-size: clamp(1rem, .6rem + .6cqw, 1.35rem); }
/* "Beside the intro": the board gets its own column, so text and board never cross in any language or size */
.web .head.with-side { width: min(32rem, 37cqw); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.3rem; align-items: start; }
.head.with-side .firma { grid-column: 1 / -1; grid-row: 1; }
.head.with-side h1 { grid-column: 1; grid-row: 2; }
.head.with-side .cta { grid-column: 1; grid-row: 3; justify-self: start; }
.head.with-side .meta { grid-column: 1; grid-row: 4; }
.head.with-side .obj.side { grid-column: 2; grid-row: 2 / 5; align-self: center; position: relative; left: auto; top: auto; bottom: auto; translate: none; width: calc(var(--hw) * 1em); margin: .6em 0 1.8em; }
.meta > span { white-space: nowrap; }
.phone .head { left: 22px; top: 22px; max-width: min(62%, 22rem); }
.phone .firma { width: min(13.5rem, 56cqw); }
.phone .head h1 { margin-top: .35rem; font-size: clamp(1.3rem, 1.05rem + 1cqw, 1.45rem); }
.phone .meta { display: none; }
/* Safari paints the status bar with the frame colour: match the real wall at the top of each plate */
.web .frame { background: #d8c3ab; } .phone .frame { background: #ddc7af; }
@media (max-width: 400px) { .phone .foot { font-size: .74rem; gap: .4rem; } .phone .foot .meta { flex: 1; min-width: 0; } .phone .foot .meta > span { white-space: normal; } }
/* Short phones crop the top of the plate; portrait tablets zoom it in: keep the intro off his head */
@media (max-height: 720px) { .phone .firma { width: 11.5rem; } .phone .head h1 { font-size: 1.12rem; } .phone .cta { margin-top: .6rem; } }
@media (min-aspect-ratio: 3/5) and (max-aspect-ratio: 4/5) { .phone .head { max-width: 27vw; } .phone .firma { width: 100%; } }

/* Editor toolbar */
.bar { position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 50; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; max-width: calc(100vw - 20px); padding: .35rem; border-radius: 14px; background: rgb(28 27 25 / .92); color: #f4f2ee; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .5); font-size: .85rem; }
.bar button { padding: .4rem .7rem; border-radius: 9px; font-weight: 600; transition: transform 140ms var(--ease-out), background 160ms ease; }
.bar button:active { transform: scale(.96); }
.bar button[aria-pressed="true"] { background: #f4f2ee; color: #1c1b19; }
.bar .sep { width: 1px; align-self: stretch; background: rgb(255 255 255 / .18); margin: 0 .15rem; }
.bar .save { background: var(--pop); color: #1c1b19; }
.bar .msg { padding: 0 .4rem; opacity: .8; min-width: 6rem; }
.tip { position: fixed; left: 50%; top: 12px; translate: -50% 0; z-index: 50; padding: .4rem .8rem; border-radius: 10px; background: rgb(255 255 255 / .92); font-size: .82rem; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .35); max-width: calc(100vw - 24px); text-align: center; }
.view-mode .tip { display: none; }

/* Public page: the frame is always the whole screen, phone or desktop */
.frame, .phone .frame { position: fixed; inset: 0; left: 0; top: 0; width: auto; height: auto; translate: none; scale: none; border-radius: 0; box-shadow: none; }
body { background: var(--wall); }