@font-face {
  font-family: "Neue Einstellung";
  src: url("assets/NeueEinstellung-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Einstellung";
  src: url("assets/NeueEinstellung-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Einstellung";
  src: url("assets/NeueEinstellung-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Einstellung";
  src: url("assets/NeueEinstellung-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FF Providence Sans";
  src: url("assets/Providence Sans Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5f5f2;
  --ink: #17100c;
  --cream: #ead8b8;
  --note: #f4efd6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--paper);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: "Neue Einstellung", "Helvetica Neue", Arial, sans-serif;
}

.landing {
  position: relative;
  display: grid;
  grid-template-rows: 12svh minmax(0, 1fr) 14svh;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.top-paper{
  top: -5px;
}


.top-paper,
.bottom-paper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bottom-paper {
  transform: scaleY(-1);
  top: 5px;
  z-index: 1;
}

.paper-edge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-logo {
  position: absolute;
  top: 30%;
  left: 50%;
  width: min(24vw, 470px);
  max-height: 82%;
  object-fit: contain;
  margin-top: 0.5rem;
  transform: translate(-50%, -50%);
}

.content {
  position: relative;
  min-height: 0;
  padding-top: 28px;
  padding-bottom: 24px;
  isolation: isolate;
  background: var(--paper);
  z-index: 2;
}

.pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  color: #d9d7d1;
  font-size: clamp(17px, 2.1vw, 32px);
  line-height: 1;
  opacity: .32;
  transform: rotate(-1deg) scale(1.08);
  top:-2rem;
  height: stretch;
  user-select: none;
}

.pattern::after {
  content: "od ciemnej szuflady do ludzi. ";
  display: block;
  white-space: pre-wrap;
}

h1 {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  color: var(--cream);
  font-size: clamp(46px, 11vw, 172px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: .84;
  text-align: center;
  max-width: 1400px;
}

.note {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--ink);
  margin:auto;
  font-size: clamp(13px, 2.5vw, 43px);
  line-height: 1.35;
  font-family: "FF Providence Sans", "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

.note p { margin: 0 0 0.5rem; }
.note p:last-child { margin-bottom: 0; }

.note-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: fill;
  z-index: 1;
  filter: drop-shadow(0px 0px 0px rgb(84, 85, 85, 0.35));
}

.note-copy {
  position: relative;
  width: min(70%, 900px);
  margin: 0;
  z-index: 2;
  text-align: center;
  top: 50%;
  transform: rotate(-2.5deg);

}

.note a,
.instagram-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .12em;
}

.instagram-link {
  position: absolute;
  top: 36%;
  left: 50%;
  right: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 26px);
  width: max-content;
  max-width: 90vw;
  font-size: clamp(14px, 1.65vw, 26px);
  transform: translate(-50%, -50%) scaleY(-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.instagram-link img {
  width: clamp(28px, 3.2vw, 50px);
  height: clamp(28px, 3.2vw, 50px);
}

.instagram-link:focus-visible {
  outline: 2px solid #19130f;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .landing { grid-template-rows: 11svh minmax(0, 1fr) 14svh; }
  .brand-logo { width: 48vw; max-height: 76%;  margin-top: 0.5rem;}
  .pattern { font-size: 12px;}
  h1 { font-size: clamp(50px, 60px, 60px); }
  .note {
        margin: 0 0 0.5em;
  }
  .note-copy { 
        top: 33%;
        margin: 0 0 0.5em;
  }
  .note-paper { height: 165%; }

  .instagram-link {
  font-size: 20px;
  }
}

@media (min-width: 1400px) {
  .landing { grid-template-rows: 15svh minmax(0, 1fr) 17svh; }
  .brand-logo { width: 330px; margin-top: 0.5rem; }
  h1 { font-size: 210px; }
  .note { width: 1200px; }
}