/* Room 23 — shared app styling. Tokens from the House Style contract. */
:root{
  --ink:#15120B; --paper:#F4F1E9; --card:#FCFBF7; --card-alt:#ECE7DA;
  --signal:#FF3B1F; --muted:#5C574A; --faint:#8A8472;
  --hairline:#DAD4C6; --hairline-2:#C9C2B0; --desk:#D9D3C5;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:'Lexend',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
::selection{background:var(--signal);color:var(--paper);}
.sig{color:var(--signal);}

/* ---------- Toolbar (injected by app.js; never prints) ---------- */
.toolbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:12px 20px;background:var(--ink);color:var(--paper);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.12em;text-transform:uppercase;
}
.toolbar .tb-home{color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:8px;}
.toolbar .tb-home::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);}
.toolbar .tb-name{color:var(--faint);font-weight:700;}
.toolbar .tb-spacer{flex:1;}
.toolbar button{
  font:inherit;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;
  border:1.5px solid var(--paper);background:transparent;color:var(--paper);
  padding:7px 16px;border-radius:0;transition:background .12s,color .12s;
}
.toolbar button:hover{background:var(--paper);color:var(--ink);}
.toolbar button.is-on{background:var(--signal);border-color:var(--signal);color:var(--paper);}
.toolbar .tb-twin{font:inherit;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid var(--paper);color:var(--paper);padding:7px 16px;transition:background .12s,color .12s;}
.toolbar .tb-twin:hover{background:var(--paper);color:var(--ink);}
.toolbar button.tb-print{background:var(--signal);border-color:var(--signal);}
.toolbar button.tb-print:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* ---------- The "desk" that holds a template card ---------- */
.desk{background:var(--desk);min-height:100vh;display:flex;flex-direction:column;
  align-items:center;padding:36px 24px 64px;}
.desk-caption{align-self:flex-start;max-width:1100px;width:100%;margin:0 auto 14px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:#6E665A;}
.desk[data-format="portrait"] [data-card]{width:100%;max-width:720px;}
.desk[data-format="landscape"] [data-card],
.desk[data-format="slide"] [data-card]{width:100%;max-width:1100px;}

/* ---------- Edit mode ---------- */
body.editing [data-card],body.editing [data-editroot]{outline:2px dashed rgba(255,59,31,.5);outline-offset:6px;cursor:text;}
body.editing [data-card] *:focus,body.editing [data-editroot] *:focus{outline:2px solid var(--signal);outline-offset:2px;border-radius:1px;}

/* ---------- Hub ---------- */
.hub{background:var(--paper);min-height:100vh;}
.hub{max-width:1120px;margin:0 auto;padding:0 48px 80px;}
.hub-masthead{display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:2px solid var(--ink);padding:40px 0 20px;flex-wrap:wrap;gap:20px;}
.hub-eyebrow{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--signal);margin-bottom:14px;}
.hub-title{font-family:'Archivo Black',sans-serif;font-size:clamp(56px,9vw,104px);
  line-height:0.84;letter-spacing:-0.02em;margin:0;text-transform:uppercase;}
.hub-lede{font-size:16px;line-height:1.55;max-width:36ch;margin:0;color:var(--muted);}
.hub-lede strong{font-weight:600;color:var(--ink);}
.hub-section{margin-top:48px;}
.hub-section-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;}
.hub-section-title{font-family:'Archivo',sans-serif;font-weight:900;font-size:20px;
  letter-spacing:-0.01em;text-transform:uppercase;}
.hub-rule{flex:1;height:2px;background:var(--hairline);}
.hub-section-kind{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--faint);}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;}
.hub-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  background:#FBF9F3;border:1px solid #E4DECF;border-left:3px solid #E4DECF;
  padding:18px 20px;min-height:104px;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;}
a.hub-card:hover{transform:translateY(-3px);border-left-color:var(--signal);
  border-color:var(--hairline-2);box-shadow:0 10px 26px rgba(0,0,0,.10);}
.hub-card[data-soon]{opacity:.5;cursor:default;}
.hub-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
.hub-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:-0.01em;line-height:1.1;}
.hub-tag{font-family:'Archivo',sans-serif;font-weight:700;font-size:9px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--hairline);
  padding:3px 6px;white-space:nowrap;flex-shrink:0;}
.hub-card[data-soon] .hub-tag{color:var(--faint);}
.hub-desc{font-size:13px;line-height:1.5;color:var(--muted);}
.hub-footer{display:flex;justify-content:space-between;align-items:flex-end;
  border-top:2px solid var(--ink);padding-top:24px;margin-top:64px;flex-wrap:wrap;gap:16px;}
.hub-footer-mark{font-family:'Archivo Black',sans-serif;font-size:28px;line-height:0.9;
  text-transform:uppercase;letter-spacing:-0.01em;}
.hub-footer-meta{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}

/* ---------- Print: only the card, at physical size ---------- */
@media print{
  .toolbar,.desk-caption{display:none !important;}
  .desk{background:#fff !important;padding:0 !important;min-height:0 !important;display:block !important;}
  [data-card]{box-shadow:none !important;border-radius:0 !important;margin:0 !important;}
  body[data-format="portrait"] [data-card]{width:8.5in !important;max-width:none !important;}
  body[data-format="landscape"] [data-card],
  body[data-format="slide"] [data-card]{width:11in !important;max-width:none !important;}
}