/* PromptStudio — design system (matches the provided design canvas) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --ink:#14151a;
  --paper:#f5f3ee;
  --white:#ffffff;
  --muted:#5b5c66;
  --line:#14151a;

  --teal:#80dcde;
  --blue:#9cbee2;
  --yellow:#fdd835;
  --purple:#9c83c7;

  --border:2px solid var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
}

.eyebrow-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.eyebrow-row .eyebrow{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.8rem;
  line-height:28px;
  margin:0;
}

.info-btn{
  height:28px;
  border-radius:999px;flex:none;
  background:var(--white);border:var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:.78rem;
  line-height:1;
  color:var(--ink);cursor:pointer;
  transition:transform .2s ease;
}
.info-btn:hover{transform:translateY(-1px)}

/* ---------- About dialog ---------- */
.about-dialog{
  position:fixed;inset:0;margin:auto;
  border:var(--border);
  border-radius:0;
  padding:32px;
  max-width:460px;width:88vw;
  max-height:82vh;overflow-y:auto;
  background:var(--white);
  color:var(--ink);
  box-shadow:10px 10px 0 var(--ink);
}
.about-dialog::backdrop{background:rgba(20,21,26,.55)}
.about-dialog h3{font-size:1.35rem;margin-bottom:4px;padding-right:28px}
.about-dialog h4{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:18px 0 6px;
}
.about-dialog p{margin:0;font-size:.92rem;line-height:1.55}
.about-dialog p+p{margin-top:12px}
.dialog-footer{margin-top:22px;padding-top:16px;border-top:2px solid var(--ink)}
.dialog-credit{font-size:.9rem;margin-bottom:10px}
.dialog-tagline{font-style:italic;color:var(--muted);font-size:.84rem;margin-bottom:10px}
.dialog-contact{font-size:.84rem}
.dialog-contact a{text-decoration:underline}
.dialog-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;border-radius:999px;
  background:var(--white);border:var(--border);
  font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.dialog-close:hover{transform:scale(1.1)}

/* ---------- Hero (home) ---------- */
.hero{padding:64px 0 40px}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:.98}
.hero p{font-size:1.15rem;color:var(--muted);max-width:520px;margin:18px 0 0}

/* ---------- Bento grid ---------- */
.bento{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    "featured featured tall"
    "blue     yellow   tall";
  gap:24px;
  padding:24px 0 80px;
}
.card{
  position:relative;
  border:var(--border);
  border-radius:0;
  padding:36px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:280px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.card:hover{
  transform:translate(-6px,-6px);
  box-shadow:10px 10px 0 var(--ink);
}
.card:active{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.card-teal{background:var(--teal)}
.card-blue{background:var(--blue)}
.card-yellow{background:var(--yellow)}
.card-purple{background:var(--purple)}

.card-featured{grid-area:featured;min-height:340px}
.card-tall{grid-area:tall;min-height:100%}
.card-blue{grid-area:blue}
.card-yellow{grid-area:yellow}

.card-icon{
  width:64px;height:64px;border-radius:999px;
  background:var(--white);border:var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:18px;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.card-icon img{width:100%;height:100%;object-fit:cover}
.card:hover .card-icon{transform:scale(1.1) rotate(-8deg)}
.card h3{font-size:1.8rem;margin-bottom:8px}
.card p{margin:0;color:var(--ink);opacity:.85;max-width:34ch}

.card-art{
  position:absolute;top:22px;right:24px;
  width:180px;height:auto;
  border:2px solid var(--ink);
  border-radius:16px;
  box-shadow:0 16px 26px rgba(20,21,26,.2);
  background:var(--white);
  transform:rotate(4deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-art{transform:rotate(1deg) scale(1.04)}
.card-featured .card-art{width:200px;top:24px;right:30px}
.card-blue .card-art,.card-yellow .card-art{width:130px;top:20px;right:18px}
.card-blue h3,.card-blue p,.card-yellow h3,.card-yellow p{max-width:56%}
.card-tall .card-art{position:static;width:220px;margin:4px auto 22px;transform:rotate(-3deg)}
.card-tall:hover .card-art{transform:rotate(-1deg) scale(1.04)}

@media (max-width: 900px){
  .bento{
    grid-template-columns:1fr;
    grid-template-areas:
      "featured"
      "tall"
      "blue"
      "yellow";
  }
  .card-art,.card-featured .card-art,.card-blue .card-art,.card-yellow .card-art{
    position:static;width:180px;margin:16px auto 0;transform:rotate(-2deg);
  }
  .card-blue h3,.card-blue p,.card-yellow h3,.card-yellow p{max-width:none}

  .about-dialog{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    margin:0;
    width:100%;max-width:100%;
    max-height:85vh;
    border-radius:20px 20px 0 0;
    border-bottom:none;
    padding-top:30px;
    box-shadow:0 -8px 20px rgba(20,21,26,.18);
  }
  .about-dialog::before{
    content:'';
    position:absolute;top:10px;left:50%;
    width:40px;height:4px;
    transform:translateX(-50%);
    border-radius:999px;
    background:var(--ink);
    opacity:.25;
  }
}