/* Skeleton Couch DEMO landing */
@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background:var(--sc-void);color:var(--sc-bone);
  font-family:var(--sc-font-ui);font-size:1rem;line-height:1.5;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 2.5rem, var(--sc-max));margin-inline:auto}

.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .7rem;border-radius:var(--sc-radius-chip);
  background:var(--sc-chip-bg);color:var(--sc-chip-fg);
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.chip-demo{background:var(--sc-accent);color:var(--sc-accent-ink)}

.banner{
  background:var(--sc-charcoal);border-bottom:1px solid var(--sc-hairline);
  text-align:center;font-size:.78rem;color:var(--sc-muted);padding:.55rem 1rem;
}
.banner strong{color:var(--sc-bone)}

.site-header{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--sc-hairline);
}
.wordmark{font-family:var(--sc-font-display);font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase}
.wordmark span{color:var(--sc-accent)}
.header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.bag-quiet{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sc-muted);
  border:1px solid var(--sc-hairline);padding:.45rem .8rem;border-radius:var(--sc-radius-chip);
}
.bag-quiet:hover{color:var(--sc-bone);border-color:var(--sc-muted)}

.hero{padding:clamp(2rem,6vw,4rem) 0 2rem}
.eyebrow{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sc-accent);margin:0 0 .75rem}
h1{
  font-family:var(--sc-font-display);font-weight:400;line-height:1.05;
  font-size:clamp(1.85rem,5vw,3.1rem);margin:0;max-width:18ch;text-transform:uppercase;
}
.lede{margin:1.1rem 0 0;max-width:38rem;color:var(--sc-muted);font-size:1.05rem}
.honesty{margin:1rem 0 0;font-size:.85rem;color:var(--sc-muted);max-width:40rem}
.honesty em{color:var(--sc-bone);font-style:normal}

.shelf{padding:2rem 0 3rem;border-top:1px solid var(--sc-hairline)}
.shelf-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}
.shelf h2{font-family:var(--sc-font-display);font-size:1.15rem;margin:0;text-transform:uppercase;letter-spacing:.04em}
.shelf-note{font-size:.78rem;color:var(--sc-muted);margin:0}

.print-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.15rem;
}
.print-card{
  background:var(--sc-surface);border:1px solid var(--sc-hairline);border-radius:var(--sc-radius-card);
  display:flex;flex-direction:column;overflow:hidden;
}
.print-card.is-picked{border-color:var(--sc-accent);box-shadow:0 0 0 1px var(--sc-accent)}
.print-art{aspect-ratio:1;background:var(--sc-charcoal);overflow:hidden}
.print-art img{width:100%;height:100%;object-fit:cover}
.print-body{padding:1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.print-body h3{font-family:var(--sc-font-display);font-size:.95rem;margin:0;text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.credit{font-size:.75rem;color:var(--sc-muted);margin:0}
.forms{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.form-chip{
  font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .55rem;border:1px solid var(--sc-hairline);border-radius:var(--sc-radius-chip);
  color:var(--sc-muted);background:transparent;cursor:default;
}
.print-card.is-picked .form-chip{color:var(--sc-bone);border-color:var(--sc-muted)}
.pick-btn{
  margin-top:auto;align-self:flex-start;
  font-family:var(--sc-font-ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .9rem;border:0;border-radius:var(--sc-radius-chip);cursor:pointer;
  background:transparent;color:var(--sc-accent);box-shadow:inset 0 0 0 1px var(--sc-accent);
}
.pick-btn:hover,.print-card.is-picked .pick-btn{background:var(--sc-accent);color:var(--sc-accent-ink)}

.site-foot{
  border-top:1px solid var(--sc-hairline);padding:1.5rem 0 2.5rem;
  font-size:.82rem;color:var(--sc-muted);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start}

/* Seal: forms support after preference — dim until pick */
.print-card:not(.is-picked) .forms {
  opacity: 0.28;
  pointer-events: none;
  filter: grayscale(0.4);
}
.print-card:not(.is-picked) .forms::before {
  content: "Forms unlock after you pick this print";
  display: block;
  width: 100%;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sc-muted);
  margin-bottom: 0.35rem;
  opacity: 1;
  filter: none;
}
.print-card.is-picked .forms {
  opacity: 1;
  pointer-events: auto;
  filter: none;
}