/* Cuttleflow Commons — components layered on the estate stylesheet.
   meridian.css is the single source of truth for tokens, chrome and type; it is a
   verbatim copy of site/assets/meridian.css in the website repo. Update it by
   re-copying that file, never by editing it here. Only Commons-specific
   components live below. */

/* hub */
.hero{padding:44px 0 24px;border-bottom:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:26px 0 8px}
@media(max-width:720px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--rule);background:#fff;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:10px;color:var(--ink);
  transition:border-color .15s,transform .12s}
.card:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.card .cls{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.card h3{font-size:22px}
.card p{font-size:14px;margin-top:2px}
.card .meta{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--ink-55);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.draft-flag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--orange);padding:3px 8px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);border:1px solid var(--rule);padding:3px 8px;display:inline-block}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 8px}

/* wording page */
.wtitle{padding:34px 0 12px;max-width:820px;margin:0 auto}
.wtitle h1{font-size:clamp(28px,4.4vw,40px)}
.wtitle .sub{font-family:var(--serif);color:var(--green);font-size:18px;margin-top:8px}
.banner{background:var(--vellum);border-left:4px solid var(--orange);padding:12px 16px;
  margin:16px 0;font-size:14.5px;color:var(--ink);max-width:820px}
.article{max-width:820px;margin:0 auto;padding:8px 0 40px}
.article h2{font-size:24px;margin:30px 0 10px}
.article h3{font-size:19px;margin:24px 0 8px}
.article p{color:var(--ink);font-size:15.5px;margin:0 0 12px}
.article li{color:var(--ink);font-size:15.5px;margin:0 0 8px 20px}
.article strong{color:var(--ink)}
.article em{color:var(--ink-72)}
.article table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
.article th,.article td{border:1px solid var(--vellum);padding:9px 11px;text-align:left;
  vertical-align:top;color:var(--ink)}
.article th{background:var(--vellum);font-family:var(--sans);font-weight:600}

/* comments */
.comments-wrap{max-width:820px;margin:36px auto 0;border-top:1px solid var(--ink);padding-top:24px}
.comments-wrap h2{font-size:22px;margin-bottom:6px}
.signin-note{font-size:14px;color:var(--ink-72);background:#fff;border:1px solid var(--rule);
  padding:13px 15px;margin:12px 0 18px}
.signin-note strong{color:var(--ink)}

/* rest of the library */
.more-wrap{max-width:820px;margin:40px auto 0;padding-bottom:8px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media(max-width:640px){.more-grid{grid-template-columns:1fr}}
.more-card{border:1px solid var(--rule);background:#fff;padding:14px 15px;color:var(--ink);
  display:flex;flex-direction:column;gap:6px;transition:border-color .15s,transform .12s}
.more-card:hover{border-color:var(--ink);transform:translateY(-2px);color:var(--ink)}
.more-card .cls{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.more-card .t{font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.2}
.more-card .st{margin-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-55)}
.more-card .st.quiet{color:var(--orange)}
.more-card .st.quiet::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--orange);margin-right:7px;vertical-align:middle}
.more-card .st.has::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--ink-55);margin-right:7px;vertical-align:middle}