/* Tschichold / New Typography — after design_handoff_tschichold-3.
   Black and white only, flush left, no radius, no shadow, no transition. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fafafa;color:#111;
     font:400 15px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;
     padding-top:118px;padding-bottom:94px}
.page{max-width:1280px;margin:0 auto;border-left:1px solid #ddd;border-right:1px solid #ddd;
      min-height:calc(100vh - 212px)}

/* masthead — floating */
.masthead{position:fixed;top:0;left:0;right:0;max-width:1280px;margin:0 auto;z-index:50;
          background:#fafafa;border-left:1px solid #ddd;border-right:1px solid #ddd;
          border-bottom:7px solid #111;display:grid;grid-template-columns:1fr auto;
          align-items:end;padding:22px 56px 16px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.36em;margin-bottom:10px}
.wordmark{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:.9}
.nav{display:flex;gap:34px;font-size:13px}
.nav a{color:#111;text-decoration:none;cursor:pointer}
.nav a:hover{opacity:.5}
.nav a.on{font-weight:700}

/* ticker band */
.ticker{display:flex;border-bottom:1px solid #111;font-size:12px;text-transform:uppercase;
        letter-spacing:.16em;overflow:hidden}
.ticker div{border-right:1px solid #111;padding:13px 28px;white-space:nowrap}
.ticker div:first-child{padding:13px 56px}
.ticker .right{margin-left:auto;border-right:0;font-weight:700}

/* section with rail */
.section{display:grid;grid-template-columns:88px 1fr;border-bottom:7px solid #111}
.rail{border-right:1px solid #111;display:flex;flex-direction:column;justify-content:space-between;
      align-items:center;padding:22px 0 26px}
.rail .num{font-size:64px;font-weight:300;line-height:.8}
.rail .vlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;
              letter-spacing:.3em;text-transform:uppercase}
.content{padding:34px 56px 48px 48px;min-width:0}
h2.eyebrow-h{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.24em;
             margin:0 0 34px}

/* controls */
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.2em;margin-bottom:6px}
input,select,textarea{font:inherit;color:#111;background:#fafafa;border:1px solid #111;
                      padding:9px 11px;width:100%;border-radius:0}
textarea{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.55;
         min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #111;outline-offset:-2px}
button{font:700 13px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;background:#111;color:#fafafa;
       border:0;padding:13px 24px;cursor:pointer;border-radius:0}
button:hover{background:#fafafa;color:#111;box-shadow:inset 0 0 0 2px #111}
button.ghost{background:#fafafa;color:#111;box-shadow:inset 0 0 0 1px #111}
button.ghost:hover{background:#111;color:#fafafa}
.row{display:grid;gap:24px;margin-bottom:24px}
.row.two{grid-template-columns:1fr 1fr}
.row.three{grid-template-columns:1fr 1fr 1fr}
.actions{display:flex;gap:1px;background:#111;border:1px solid #111;margin-bottom:34px}
.actions button{flex:0 0 auto}

/* the two-pane working area */
.work{display:grid;grid-template-columns:300px 1fr;gap:1px;background:#111;border:1px solid #111}
.pane{background:#fafafa;padding:0;min-width:0}
.pane h3{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
         padding:14px 18px;border-bottom:3px solid #111}
.catalog{max-height:520px;overflow:auto}
.catalog button{display:block;width:100%;text-align:left;background:#fafafa;color:#111;
                border-bottom:1px solid #ddd;padding:11px 18px;font-weight:400;font-size:13px}
.catalog button:hover{background:#111;color:#fafafa;box-shadow:none}
.catalog button .op{font-weight:700}
.catalog button .desc{display:block;font-size:11px;opacity:.65;margin-top:3px;line-height:1.35}
.catalog .group{font-size:11px;text-transform:uppercase;letter-spacing:.2em;padding:14px 18px 6px;
                border-bottom:1px solid #111;font-weight:700}

/* transcript — the terminal block of the design */
.transcript{background:#111;color:#fafafa;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
            font-size:13px;line-height:1.65;padding:22px 26px;overflow:auto;max-height:520px;
            white-space:pre-wrap;word-break:break-word;margin:0}
.transcript .t{opacity:.5}
.transcript .req{font-weight:700}
.transcript .err{text-decoration:underline}
.transcript .sep{opacity:.35}

/* tables */
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.2em;
   border-bottom:3px solid #111;padding:10px 12px 8px}
td{border-bottom:1px solid #ddd;padding:10px 12px;vertical-align:top}
tr.pick{cursor:pointer}
tr.pick:hover td{background:#111;color:#fafafa}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px}

/* footer — floating */
.footer{position:fixed;bottom:0;left:0;right:0;max-width:1280px;margin:0 auto;z-index:50;
        background:#fafafa;border-left:1px solid #ddd;border-right:1px solid #ddd;
        border-top:7px solid #111;padding:30px 56px;display:grid;
        grid-template-columns:1fr auto auto;gap:48px;align-items:center}
.footer .wordmark{font-size:24px}
.footer .lab{font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.hide{display:none}
.note{font-size:13px;line-height:1.55;max-width:58ch}
@media (max-width:900px){
  .section{grid-template-columns:1fr}.rail{flex-direction:row;border-right:0;border-bottom:1px solid #111}
  .work{grid-template-columns:1fr}.row.two,.row.three{grid-template-columns:1fr}
  .content{padding:28px 20px}.masthead,.footer{padding-left:20px;padding-right:20px}
}