/* Vale Barahona — "studio desk" placeholder */
@font-face { font-family: "Caveat"; font-weight: 400; font-display: swap; src: url("/assets/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("/assets/fonts/caveat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-weight: 400; font-display: swap; src: url("/assets/fonts/special-elite-latin-400-normal.woff2") format("woff2"); }

:root {
  --kraft: #C9A57E;
  --kraft-dark: #B8916A;
  --paper: #FBFAF6;
  --graphite: #262626;
  --gray: #5E5B57;
  --light: #9A958E;
  --tape: rgba(233, 221, 191, .88);
  --blue: #2E63C7;
  --tape-blue: rgba(46, 99, 199, .9);
  --brown: #5B3F26;
  --hand: "Caveat", "Segoe Print", cursive;
  --type: "Special Elite", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: clip; }

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--kraft);
  /* subtle cardboard grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--graphite);
  font-family: var(--type);
  position: relative;
}

a { color: inherit; }

/* ---------- desk decorations ---------- */
.desk-loops {
  position: absolute; top: 48px; right: 4vw;
  width: 200px; height: 70px; transform: rotate(-8deg);
  fill: none; stroke: #4A4743; stroke-width: 1.3; stroke-linecap: round; opacity: .7;
}
.scrap { position: absolute; display: block; height: 18px; }
.scrap-blue { left: 4vw; bottom: 90px; width: 90px; background: var(--tape-blue); transform: rotate(22deg); }

.tape {
  position: absolute; display: block; z-index: 3;
  width: 120px; height: 30px; background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.tape-blue { background: var(--tape-blue); }

/* ---------- layout ---------- */
.desk {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 40px 40px;
}

.sheet {
  position: relative;
  background: var(--paper);
  box-shadow: 0 8px 22px rgba(46, 31, 15, .28);
  transform: rotate(-1deg);
  padding: 44px 64px 56px;
}
.tape-tl { top: -10px; left: -52px; width: 150px; height: 36px; transform: rotate(-35deg); }
.tape-br { bottom: -6px; right: -48px; width: 150px; height: 36px; transform: rotate(-30deg); }

.sheet-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
}
.head-links { display: flex; align-items: center; gap: 28px; }
.ig-head { color: var(--blue); text-decoration: none; }
.ig-head:hover { text-decoration: underline; }

.lang { display: inline-flex; gap: 6px; color: var(--light); }
.lang button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--light);
}
.lang button[aria-pressed="true"] { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.lang button:focus-visible, a:focus-visible { outline: 2px dashed var(--blue); outline-offset: 3px; }

.sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 32px;
  margin-top: 20px;
}

/* ---------- intro column ---------- */
.name {
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(64px, 8.4vw, 108px); line-height: .82;
  transform: rotate(-2deg); transform-origin: left center;
  margin: 18px 0 34px -6px;
}

.typed-label {
  position: relative; display: inline-block;
  background: #fff; padding: 8px 18px;
  font-size: 19px; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(46, 31, 15, .18);
  transform: rotate(1.5deg);
}
.tape-label { width: 46px; height: 20px; top: -10px; left: -30px; transform: rotate(-28deg); }

.media { margin-top: 18px; font-size: 15px; color: var(--gray); }

.soon { margin-top: 44px; font-size: 24px; }
.underline { display: block; width: min(360px, 100%); height: 14px; margin-top: 6px; fill: none; stroke: var(--graphite); stroke-linecap: round; stroke-width: 1.6; }
.underline .thin { stroke-width: 1; opacity: .6; }

.hint {
  margin-top: 30px; display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  font-family: var(--hand); font-size: 27px;
}
.arrow { width: 52px; height: 26px; transform: rotate(20deg) translateY(10px); fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ig-button {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  margin-top: 26px; padding: 11px 18px;
  background: #fff; border: 1.5px solid var(--blue);
  box-shadow: 0 3px 8px rgba(46, 31, 15, .2);
  text-decoration: none; transform: rotate(-1deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ig-button:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 6px 14px rgba(46, 31, 15, .25); }
.ig-word { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.ig-handle { font-size: 17px; color: var(--blue); }
.tape-btn { width: 44px; height: 22px; top: -12px; right: -18px; transform: rotate(28deg); }

/* ---------- collage ---------- */
.collage {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 22px; align-items: start;
  padding-top: 8px;
}
.print {
  position: relative; background: #fff; padding: 10px;
  box-shadow: 0 4px 10px rgba(46, 31, 15, .25);
}
.print img { display: block; width: 100%; height: auto; background: #E4E0D8; }
.print figcaption { font-family: var(--hand); font-size: 20px; padding: 6px 2px 0; }
.print .tape { width: 42%; height: 26px; top: -13px; left: 30%; }

.p-vale  { transform: rotate(-5deg); }
.p-vale .tape { transform: rotate(-12deg); }
.p-light { transform: rotate(4deg); margin-top: 18px; }
.p-light .tape { transform: rotate(-3deg); }
.p-dog   { transform: rotate(3deg); }
.p-dog .tape { transform: rotate(-4deg); }
.p-boat  { transform: rotate(-4deg); margin-top: -10px; }
.p-boat .tape { transform: rotate(-11deg); }

.p-ink {
  position: absolute; width: 156px; right: -150px; top: 52%;
  transform: rotate(7deg);
  display: none;
}
.p-ink .tape { transform: rotate(0deg); }

.desk-foot {
  max-width: 1080px; margin: 0 auto; padding: 8px 40px 40px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brown);
}

@media (max-width: 1379px) { .desk { overflow-x: clip; } }

/* wide screens: loose ink sketch on the kraft */
@media (min-width: 1380px) {
  .p-ink { display: block; }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .desk { padding: 64px 24px 24px; }
  .sheet { padding: 36px 36px 48px; }
  .sheet-body { grid-template-columns: 1fr; }
  .collage { order: 2; max-width: 560px; }
  .intro { display: contents; }
  .name, .typed-label, .media { order: 1; }
  .soon, .underline, .hint, .ig-button { order: 3; }
  .sheet-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .collage { margin: 40px 0 10px; width: 100%; }
  .desk-foot { padding: 8px 24px 32px; }
}

/* ---------- mobile ---------- */
@media (max-width: 520px) {
  .desk { padding: 48px 16px 16px; }
  .sheet { padding: 24px 22px 40px; transform: rotate(-.8deg); }
  .tape-tl { width: 96px; height: 26px; left: -34px; top: -6px; }
  .tape-br { width: 96px; height: 26px; right: -30px; }
  .sheet-head { font-size: 11px; }
  .ig-head { display: none; }
  .name { font-size: 78px; margin-bottom: 26px; }
  .typed-label { font-size: 14px; padding: 6px 12px; }
  .media { font-size: 12.5px; }
  .collage { gap: 22px 16px; }
  .print { padding: 7px; }
  .print figcaption { font-size: 16px; }
  .soon { margin-top: 30px; font-size: 17px; }
  .underline { width: 250px; }
  .hint { font-size: 22px; margin-top: 22px; }
  .arrow { width: 38px; height: 19px; }
  .ig-button { gap: 10px; padding: 10px 14px; }
  .ig-word { font-size: 11px; }
  .ig-handle { font-size: 14px; }
  .desk-loops { width: 110px; height: 40px; top: 6px; right: 6px; }
  .scrap-blue { left: -20px; top: 20px; bottom: auto; width: 60px; }
  .desk-foot { font-size: 11px; padding: 8px 18px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-button { transition: none; }
}