/* _thisisblanco – Impressum and Contact, in the look of the VHS library (paper, hairlines, grotesk headlines). */
:root {
  --paper: #ebeae6;
  --ink: #141413;
  --ink-2: #6d6c68;
  --hair: rgba(20, 20, 19, .28);
  --display: "Archivo Black", sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .2, 1);
  --roll-dur: 1.1s;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); font: 13px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .5; /* no blend mode: blending over the 3D canvas cost a full-screen pass every frame */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; }
.logo { font: 400 18px/.95 var(--display); letter-spacing: -.03em; text-decoration: none; }

.page { width: min(720px, 100% - 32px); margin: 0 auto; padding: 120px 0 72px; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.back:hover { color: var(--ink); }
.title { margin: 6px 0 26px; font: 400 clamp(46px, 9vw, 104px)/.88 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.lead { margin: 0 0 30px; max-width: 520px; font-size: 15px; line-height: 1.5; }

/* letters come up from below, word by word */
.roll { display: inline-block; white-space: pre; overflow: hidden; vertical-align: top; }
.roll i { display: inline-block; font-style: normal; transform: translateY(105%); animation: rollIn var(--roll-dur) var(--ease) forwards; }
@keyframes rollIn { to { transform: none; } }

/* hairline table: the lines draw from left to right, label first, then the value */
.facts { margin: 0 0 40px; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; }
.facts dt, .facts dd { margin: 0; padding: 10px 0; min-height: 40px; display: flex; align-items: center;
  background: linear-gradient(var(--hair), var(--hair)) left bottom / 0 1px no-repeat; animation: lineIn calc(var(--roll-dur) * .45) cubic-bezier(.5, 0, .9, .6) forwards; }
.facts dd { justify-content: flex-end; text-align: right; font-size: 14px; font-weight: 500; animation-duration: calc(var(--roll-dur) * .8); animation-timing-function: cubic-bezier(.1, .5, .3, 1); }
.facts dt:first-of-type, .facts dd:first-of-type { background: linear-gradient(var(--hair), var(--hair)) left bottom / 0 1px no-repeat, linear-gradient(var(--hair), var(--hair)) left top / 0 1px no-repeat; animation-name: lineIn2; }
.facts dt { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding-right: 16px; }
.facts dd a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.facts dd a:hover { background-size: 100% 1px; }
@keyframes lineIn { to { background-size: 100% 1px; } }
@keyframes lineIn2 { to { background-size: 100% 1px, 100% 1px; } }

.block { margin: 0 0 30px; opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.block h2 { margin: 0 0 8px; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.block p { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.6; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* contact: the address as the headline */
.mail { display: inline-block; margin: 0 0 36px; font: 400 clamp(26px, 5.4vw, 60px)/1 var(--display); letter-spacing: -.03em; text-decoration: none; word-break: break-word;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 3px no-repeat; padding-bottom: 6px; transition: background-size .6s var(--ease); }
.mail:hover { background-size: 100% 3px; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 10px; letter-spacing: .08em; color: var(--ink-2); }
.foot a { text-decoration: none; text-transform: uppercase; letter-spacing: .14em; min-height: 44px; display: inline-flex; align-items: center; margin-top: -14px; }
.foot a:hover { color: var(--ink); }
.foot a[aria-current] { color: var(--ink); }

@media (max-width: 600px) {
  .page { padding-top: 84px; }
  .logo { font-size: 15px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { min-height: 0; padding: 12px 0 0; background: none; animation: none; }
  .facts dt:first-of-type { background: linear-gradient(var(--hair), var(--hair)) left top / 0 1px no-repeat; animation: lineIn .6s var(--ease) forwards; }
  .facts dd { justify-content: flex-start; text-align: left; padding-top: 2px; }
  .facts dd:first-of-type { background: linear-gradient(var(--hair), var(--hair)) left bottom / 0 1px no-repeat; animation-name: lineIn; }
}
@media (prefers-reduced-motion: reduce) {
  .roll i, .block { animation: none; transform: none; opacity: 1; }
  .facts dt, .facts dd { animation: none; background-size: 100% 1px, 100% 1px; }
}

/* "Blur spray" type style (same as the shelf): filters #spray-* in the page */
html[data-type="blur"] .title, html[data-type="blur"] .mail, html[data-type="blur"] .logo { font-family: "Titan One", "Archivo Black", sans-serif; letter-spacing: -.015em; }
html[data-type="blur"] .title { filter: url(#spray-l); }
html[data-type="blur"] .mail { filter: url(#spray-m); background-image: none; }
html[data-type="blur"] .logo { filter: url(#spray-xs); }
.spray-ink { flood-color: var(--ink); }
html[data-type="blur"] .title, html[data-type="blur"] .mail, html[data-type="blur"] .logo { will-change: transform; }
@media (max-width: 600px) {
  html[data-type="blur"] .title { filter: url(#spray-s); }
  html[data-type="blur"] .mail { filter: url(#spray-xs); }
  html[data-type="blur"] .logo { filter: url(#spray-xxs); }
}

/* baked spray (spray-bake.js): the word is an image, no live filter; hidden for the moment it is being made */
.baking { opacity: 0; }
.baked { filter: none !important; will-change: auto !important; }
.spray-img { display: block; max-width: none; height: auto; pointer-events: none; user-select: none; animation: sprayIn var(--roll-dur) var(--ease) both; }
.logo.baked, .mail.baked { display: inline-block; }
.logo.baked .spray-img { display: inline-block; vertical-align: top; animation: none; }
@keyframes sprayIn { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }