/* Who is Letamedia? — a desk with a postcard and a carpet, after carterogunsola.com/about */

.desk {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 110px);
  padding: calc(var(--chrome-h) + 24px) 4vw 7vh;
}

/* Postcard */

.postcard {
  position: relative;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 20px;
  width: clamp(560px, 48vw, 740px);
  padding: 18px 20px 18px 18px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .06) .7px, transparent 1px) 0 0 / 8px 8px,
    var(--paper);
  box-shadow: 0 2px 4px rgba(16, 40, 76, .08), 0 24px 60px rgba(16, 40, 76, .26);
  transform: rotate(-2deg);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.postcard:hover {
  transform: rotate(-1deg) translateY(-4px);
  box-shadow: 0 2px 4px rgba(16, 40, 76, .08), 0 32px 70px rgba(16, 40, 76, .3);
}

.clip {
  position: absolute;
  top: -30px;
  left: 20px;
  z-index: 3;
  width: 26px;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) drop-shadow(1px 2px 2px rgba(0, 0, 0, .18));
  transform: rotate(-8deg);
}
.clip-edge { stroke: #6f757d; stroke-width: 2.8; }
.clip-body { stroke: #c3c8ce; stroke-width: 1.7; }
.clip-shine { stroke: #fbfcfd; stroke-width: .6; opacity: .9; transform: translate(-.35px, -.2px); }

/* Google stamp: the same scalloped paper as the photo stamp, with the G on a white face */
.gstamp {
  position: absolute;
  top: -4px;
  right: 2%;
  z-index: 1;
  width: 54px;
  padding: 9px;
  background: radial-gradient(circle at 4px 4px, transparent 2.6px, var(--paper-hi) 3px) -4px -4px / 8px 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
  transform: rotate(4deg);
}
.gstamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--white);
}
.gstamp svg { position: relative; display: block; width: 100%; height: auto; }

/* Stamp: scalloped edge from a grid of holes, with a solid face laid over the middle */
.stamp {
  position: relative;
  z-index: 2;
  align-self: start;
  padding: 13px 13px 0;
  background: radial-gradient(circle at 5px 5px, transparent 3.3px, var(--paper-hi) 3.8px) -5px -5px / 10px 10px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28));
  transform: rotate(-1.5deg);
}
.stamp::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--paper-hi);
}
.stamp > * { position: relative; }
.stamp-window { overflow: hidden; }
/* Closer in on the face, like a portrait stamp */
.stamp-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 188 / 221;
  object-fit: cover;
  object-position: 55% 20%;
  filter: grayscale(1) contrast(1.15) brightness(1.03);
  transform: scale(1.45);
  transform-origin: 54% 18%;
}
.stamp-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 9px 1px 12px;
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stamp-cap svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.1; }

/* The rest of the card: stamps above, links along the bottom */
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  color: #1a1a1a;
}

.cancel, .postmark, .postmark-logo {
  position: absolute;
  pointer-events: none;
}
.cancel {
  top: 8%;
  left: -34%;
  width: 62%;
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 1.8;
  opacity: .55;
  filter: url(#ink);
}
.postmark {
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 1.25;
  stroke-linejoin: round;
  opacity: .55;
  filter: url(#ink);
}
.postmark text {
  fill: #1a1a1a;
  stroke: none;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.postmark .stamp-name { font-size: 6.2px; letter-spacing: .1em; }
.stamp-uae .stamp-name { font-size: 4.1px; letter-spacing: .04em; }
/* Perforation: round dots along the outer edge */
.postmark .perf { stroke-width: 2.6; stroke-dasharray: 0 4.6; stroke-linecap: round; }
.stamp-london { top: 30%; right: 3%; width: 92px; transform: rotate(-7deg); }
.stamp-uae { top: 34%; right: calc(3% + 114px); width: 84px; transform: rotate(6deg); }
.postmark-logo {
  z-index: 2;
  top: 13%;
  right: calc(2% + 34px);
  width: 62px;
  height: auto;
  opacity: .42;
  transform: rotate(5deg);
}

.links {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(0, 0, 0, .28);
}
.linkedin { display: inline-flex; color: #1a1a1a; transition: color .2s; }
.linkedin svg { width: 18px; height: 18px; fill: currentColor; }
.linkedin:hover { color: #0a66c2; }

.foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 2px;
  border-bottom: 1px dashed rgba(0, 0, 0, .28);
  padding-bottom: 12px;
}
.btn-solid {
  padding: 6px 11px;
  border: 0;
  border-radius: 4px;
  background: #1e1e1e;
  color: var(--white);
  font: 700 14px/1.2 var(--grotesk);
  cursor: pointer;
  transition: background-color .2s;
}
.btn-solid:hover { background: var(--navy); }

/* The carpet: a faint line drawing of carpet.jpeg, tilted 15° */

.carpet {
  position: relative;
  flex: none;
  width: clamp(250px, 23vw, 360px);
  aspect-ratio: 736 / 1090;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px;
  background: var(--paper-hi);
  box-shadow: 0 2px 4px rgba(16, 40, 76, .08), 0 24px 60px rgba(16, 40, 76, .24);
  color: var(--ink);
  font-family: var(--grotesk);
  cursor: pointer;
  transform: rotate(15deg);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.carpet:hover, .carpet:focus-visible {
  transform: rotate(12deg) translateY(-6px);
  box-shadow: 0 2px 4px rgba(16, 40, 76, .08), 0 34px 70px rgba(16, 40, 76, .3);
}
.carpet-art {
  position: absolute;
  inset: 10px;
  background: url("assets/carpet-lines.png") center / contain no-repeat;
  opacity: .3;
}
.carpet-label {
  position: relative;
  display: block;
  padding: 0 12%;
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* Letters that open over the page */

.letter {
  width: min(660px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .05) .7px, transparent 1px) 0 0 / 8px 8px,
    var(--paper-hi);
  box-shadow: 0 30px 90px rgba(16, 40, 76, .35);
  color: var(--ink);
  font-family: var(--grotesk);
}
/* Padding lives inside, so a click on the dialog itself means the backdrop */
.letter-body { position: relative; padding: 46px 50px 38px; }
.letter[open] { animation: unfold .45s var(--ease); }
.letter::backdrop {
  background: rgba(16, 40, 76, .42);
  backdrop-filter: blur(3px);
}
@keyframes unfold {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.letter p {
  margin: 0 0 1.25em;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
}
.letter-lead {
  margin: 0 0 1.4em;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.letter-title {
  margin: 0 0 .9em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.letter .signature {
  margin: .2em 0 0;
  color: var(--navy);
  font-family: "La Femme Makita", var(--grotesk);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
}

.letter-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, .06);
  color: var(--ink);
  cursor: pointer;
}
.letter-close:hover { background: rgba(0, 0, 0, .12); }
.letter-close svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Narrower screens: the carpet goes under the postcard */
@media (max-width: 1000px) {
  .desk { flex-direction: column; gap: 70px; padding-top: calc(var(--chrome-h) + 50px); }
  .postcard { width: min(640px, 100%); }
  .carpet { width: clamp(240px, 48vw, 330px); }
}

@media (max-width: 560px) {
  .postcard { grid-template-columns: 40% 1fr; gap: 12px; padding: 12px; }
  .stamp { padding: 10px 10px 0; }
  .stamp-cap { font-size: 8px; }
  .cancel { left: -40%; width: 70%; }
  .stamp-london { width: 54px; top: 26%; }
  .stamp-uae { width: 48px; right: 38%; top: 30%; }
  .postmark-logo { width: 44px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .carpet { width: 64vw; }
  .letter-body { padding: 42px 22px 26px; }
  .letter p, .letter-lead { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .postcard, .carpet { transition: none; }
  /* Padding lives inside, so a click on the dialog itself means the backdrop */
.letter-body { position: relative; padding: 46px 50px 38px; }
.letter[open] { animation: none; }
}