/* Crafty Opossum Studio — hand-drawn, black ink on lavender paper, mildly feral */

:root{
  --ink:    #111111;
  --paper:  #e5cffb;   /* lavanda — elegido por Mona */
  --paper2: #dfc4fa;   /* mismo tono, medio paso más hondo */
  --muted:  #4d4a44;
  --hl:     #ffe14d;          /* highlighter yellow */
  --line:   3px solid var(--ink);
  --wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --pad:    clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,.4vw + .95rem,1.15rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.skip{ position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:20; }
.skip:focus{ left:1rem; top:1rem; }

a{ color:inherit; }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

h1,h2,h3,.mark,.btn,.eyebrow,.badge,.ticker,.footer__mark{
  font-family:"Permanent Marker",cursive; font-weight:400;
}

/* ── masthead ────────────────────────────── */
.masthead{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem;
  align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
  border-bottom:var(--line);
}
.mark{ text-decoration:none; font-size:1.3rem; letter-spacing:.01em; }
.nav{ display:flex; gap:1.5rem; font-family:Karla,sans-serif; font-weight:600; font-size:.98rem; }
.nav a{ text-decoration:none; padding:.15rem .1rem; box-shadow:inset 0 -.5em 0 transparent; transition:box-shadow .18s; }
.nav a:hover{ box-shadow:inset 0 -.55em 0 var(--hl); }

/* ── hero ────────────────────────────────── */
.hero{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(3rem,9vh,6rem) var(--pad);
}
@media (min-width:56rem){ .hero{ grid-template-columns:1.45fr .8fr; } }

.eyebrow{ margin:0 0 1rem; font-size:1rem; transform:rotate(-1.5deg); display:inline-block; }
.hero__title{
  margin:0 0 1.25rem;
  font-size:clamp(2.3rem,7.5vw,4.6rem);
  line-height:1.05;
}
.hl{ background:linear-gradient(transparent 58%, var(--hl) 58% 92%, transparent 92%); padding:0 .1em; }
.hero__lead{ margin:0 0 2rem; max-width:44ch; color:var(--muted); font-size:1.1em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

.btn{
  display:inline-block; text-decoration:none;
  font-size:.95rem; padding:.7rem 1.4rem;
  border:var(--line); border-radius:var(--wobble);
  background:var(--ink); color:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn--plain{ background:var(--paper); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .btn:hover{ transform:none; } }

/* logo — JPG on cream: multiply drops the white box, keeps the ink */
.hero__badge{ display:flex; justify-content:center; }
.logo{
  width:min(20rem,72vw); height:auto; display:block;
  mix-blend-mode:multiply;
  transform:rotate(-3deg);
  transition:transform .3s ease;
}
.logo:hover{ transform:rotate(2deg) scale(1.03); }
@media (prefers-reduced-motion:reduce){ .logo,.logo:hover{ transform:none; } }

/* ── ticker ──────────────────────────────── */
.ticker{
  border-block:var(--line); background:var(--ink); color:var(--paper);
  overflow:hidden; padding:.7rem 0;
}
.ticker__row{
  display:flex; gap:1.4rem; align-items:center; width:max-content;
  font-size:1rem; letter-spacing:.04em;
  animation:slide 32s linear infinite;
}
.ticker b{ color:var(--hl); }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .ticker__row{ animation:none; } }

/* ── sections ────────────────────────────── */
.section__title{ margin:0 0 .6rem; font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.15; }
.section__lead{ margin:0 0 2.5rem; color:var(--muted); max-width:52ch; }

.work{ padding:clamp(3.5rem,9vh,6rem) var(--pad); }
.cards{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }

.card{
  background:var(--paper2);
  border:var(--line); border-radius:var(--wobble);
  padding:1.7rem 1.5rem;
  box-shadow:6px 6px 0 var(--ink);
  transition:transform .18s;
}
.card:hover{ transform:translateY(-4px) rotate(0deg); }
.card--a{ transform:rotate(-1.2deg); }
.card--b{ transform:rotate(.9deg); }
.card--c{ transform:rotate(-.6deg); }
.card--d{ transform:rotate(1.4deg); }
@media (prefers-reduced-motion:reduce){ .card,.card:hover{ transform:none; } }
.card h3{ margin:0 0 .55rem; font-size:1.35rem; }
.card p{ margin:0; color:var(--muted); font-size:.98em; }

/* ── studio ──────────────────────────────── */
.studio{ padding:clamp(3.5rem,9vh,6rem) var(--pad); border-block:var(--line); background:var(--paper2); }
.studio__inner{ max-width:58ch; }
.studio p{ color:var(--muted); }
.signature{ margin-top:1.75rem; font-family:"Permanent Marker",cursive; font-size:1.3rem; color:var(--ink) !important; transform:rotate(-2deg); display:inline-block; }

/* ── contact ─────────────────────────────── */
.contact{ padding:clamp(3.5rem,9vh,6rem) var(--pad); }
.contact__note{ margin:1.25rem 0 0; color:var(--muted); font-style:italic; }

/* ── footer ──────────────────────────────── */
.footer{
  padding:2.25rem var(--pad); border-top:var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
  justify-content:space-between; align-items:baseline;
}
.footer p{ margin:0; }
.footer__mark{ font-size:1.1rem; }
.footer__fine{ color:var(--muted); font-size:.95rem; }
.footer__credit{ flex-basis:100%; margin-top:.9rem !important; color:var(--muted); font-size:.9rem; }