/* Shared Winy tokens and faces for the motion studies. Colors come from
   brand/winy/README.md and the homepage :root. */
:root {
  --paper:#EDE7D8; --paper-deep:#E3DBC8; --marble:#F7F4EC;
  --ink:#23241F; --ink-soft:#5E6056;
  --forest:#3E6B4F; --forest-deep:#2F5D45; --olive:#535845;
  --sage:#8B9686; --sage-pale:#C4CABD; --wood:#B0825B;
  --floor:#1D211C; --chalk:#E8E4D6; --lichen:#7FA98C; --hair:#CFCBBB;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --lift:0 2px 3px rgba(35,36,31,.06), 0 24px 44px -18px rgba(35,36,31,.34);
  --ground:var(--paper);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:var(--ground); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:32px 16px;
}
body.night { --ground:var(--floor); }

/* Foreground sheet: marble paper pasted slightly askew, square corners like the homepage */
.sheet {
  position:relative; z-index:1; width:100%; max-width:430px; background:var(--marble);
  padding:34px 32px 30px; box-shadow:var(--lift); transform:rotate(-.5deg);
}
.night .sheet { box-shadow:0 2px 3px rgba(0,0,0,.2), 0 40px 80px -20px rgba(0,0,0,.7); }
.mark { display:flex; align-items:center; gap:12px; font:400 28px/1 var(--serif); letter-spacing:-.025em; color:var(--ink); }
.mark img { width:52px; height:52px; object-fit:contain; margin:-6px -2px -6px -8px; }
.mark img:not([src]) { visibility:hidden; }
/* The big dithered mark behind the sheet (winy-mark.js), frameless */
.mark-ov { position:fixed; left:50%; top:50%; width:min(94vh,94vw); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
h1 strong, .panel h1 strong { font-weight:600; color:var(--forest-deep); } /* "win": the name inside the line */
h1 { font:400 clamp(30px,4.2vw,40px)/1.08 var(--serif); letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.sheet > div:nth-child(2) { margin:26px 0 12px; }
.lede { font-size:15.5px; line-height:1.55; color:var(--ink-soft); margin-bottom:24px; text-wrap:pretty; }
.btn {
  display:flex; align-items:center; justify-content:center; min-height:48px; font:500 15.5px var(--sans);
  background:var(--forest); color:var(--marble); border:1px solid var(--forest-deep); text-decoration:none;
}
.btn:hover { background:var(--forest-deep); }
@media (max-width:480px) { .sheet { padding:28px 22px 24px; } }

/* ---- Wall card chrome; the feature faces themselves are features.css ---- */
.face { background:var(--marble); border:1px solid var(--hair); overflow:hidden; display:flex; flex-direction:column; }
.dm-c.is-lift .face, .dm-flyer .face { border-color:var(--wood); box-shadow:0 26px 60px rgba(35,36,31,.4); }
.night .dm-c.is-lift .face, .night .dm-flyer .face { box-shadow:0 26px 60px rgba(0,0,0,.6); }
.dm-pop { display:none !important; } /* a "+1" means nothing on a board card */

/* Story window restyled as a Winy agent card: floor tones, square corners, no circles */
body .dm-win { background:var(--floor); border-color:#2E332C; border-radius:4px; }
body .dm-win__ring, body .dm-win__wave { border-radius:4px; }
body .dm-win__top { border-bottom-color:#2E332C; }
body .dm-win__top i, body .dm-win__av { border-radius:0; background:#3A4037; }
body .dm-win__lit { border-radius:0; }
body .dm-win__user { background:#2A3028; border-radius:3px; }
body .dm-slot { background:#252A23; border-color:#3A4037; border-radius:3px; }
body .dm-slot__art, body .dm-composer i { border-radius:0; }
body .dm-slot svg path { stroke:var(--lichen); }
body .dm-composer { background:#232822; border-color:#3A4037; border-radius:3px; }
body .dm-caret { border-radius:0; }