/* =========================================================================
   VentureSpeak — Retro Mac × 90s Bloomberg
   - Cream paper background (aged Macintosh / printed terminal output)
   - IBM Plex Mono throughout
   - Hard black borders, 4px offset drop shadows (classic Mac window shadow)
   - Diagonal-stripe title bars
   - Bloomberg-style ticker accents (amber + terminal green)
   ========================================================================= */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Paper / Mac UI */
  --paper:#f4ecd5;
  --paper-dim:#ebe1c3;
  --paper-bright:#fbf5e3;
  --ink:#161611;
  --ink-2:#3a3830;
  --ink-3:#6e6856;
  --ink-4:#9c9580;

  /* Bloomberg accents */
  --amber:#ff7a00;
  --green:#0a8a4a;
  --red:#c32f3a;
  --terminal-bg:#0d0d0a;
  --terminal-text:#d4cfa3;
  --terminal-glow:#ffb000;

  /* Categories — print-ink saturated tones */
  --cat-rejection:#c32f3a;
  --cat-jargon:#5b3aa6;
  --cat-fundraising:#0a8a4a;
  --cat-metrics:#a26900;
  --cat-culture:#a4316f;
  --cat-negotiation:#1356a8;
  --cat-fund:#4f3680;
  --cat-exit:#c46618;
  --cat-ai:#0e6b6b;

  /* Misc */
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:2px 2px 0 var(--ink);
  --border:2px solid var(--ink);
}

html,body{
  color:var(--ink);
  font-family:'IBM Plex Mono','JetBrains Mono',Menlo,Monaco,monospace;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","ss02";
}

/* Classic Mac desktop pattern: 50% dot dither (the System 6/7 default) */
body{
  background-color:#bcbcbc;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2'><rect x='0' y='0' width='1' height='1' fill='%23ffffff'/><rect x='1' y='1' width='1' height='1' fill='%23ffffff'/></svg>");
  background-size:2px 2px;
  min-height:100vh;
  padding:0 0 0;
}

/* ============================================================
   SYSTEM MENU BAR — System 6/7 style: white, 1px black bottom
   ============================================================ */
.menubar{
  background:#fff;
  border-bottom:1.5px solid var(--ink);
  height:22px;
  display:flex;
  align-items:center;
  gap:0;
  padding:0 14px;
  font-family:'VT323','IBM Plex Mono',monospace;
  font-size:16px;
  letter-spacing:0;
  color:var(--ink);
  position:relative;
  z-index:50;
}
.apple-menu{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;height:100%;
  cursor:default;
}
.apple-menu svg{display:block}
.apple-menu:hover{background:var(--ink);color:#fff}
.apple-menu:hover svg rect[fill="#fff"]{fill:var(--ink)}
.menu-item{
  display:inline-flex;align-items:center;
  padding:0 10px;height:100%;
  cursor:default;
  font-feature-settings:normal;
}
.menu-item:hover{background:var(--ink);color:#fff}
.menu-spacer{flex:1}
.menu-clock{
  padding:0 8px;
  font-variant-numeric:tabular-nums;
  cursor:default;
}

a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--amber)}

/* =========================================================================
   TICKER TAPE (top of page)
   ========================================================================= */
.ticker{
  background:var(--terminal-bg);
  color:var(--terminal-glow);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:8px 0;
  border-bottom:var(--border);
  overflow:hidden;
  position:relative;
}
.ticker-track{
  display:flex;
  gap:48px;
  white-space:nowrap;
  animation:tick 80s linear infinite;
  width:max-content;
}
.ticker-item{display:inline-flex;align-items:center;gap:10px}
.ticker-item .arrow-up{color:var(--green)}
.ticker-item .arrow-down{color:var(--red)}
.ticker-sep{color:var(--ink-3);opacity:.5}
@keyframes tick{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* =========================================================================
   HEADER — black masthead with Mac window stripe accent
   ========================================================================= */
.header{
  background:var(--terminal-bg);
  color:var(--paper);
  border-bottom:var(--border);
  padding:0;
  position:relative;
}
.masthead{
  max-width:1200px;
  margin:0 auto;
  padding:36px 24px 28px;
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
}
.logo{
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:48px;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--paper);
  text-transform:uppercase;
  position:relative;
}
.logo::before{
  content:'»';
  color:var(--amber);
  margin-right:12px;
  font-weight:400;
}
.logo-cursor{
  display:inline-block;
  width:14px;
  height:42px;
  background:var(--amber);
  margin-left:8px;
  vertical-align:-6px;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.tagline{
  color:var(--ink-4);
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-top:12px;
  font-weight:500;
}
.tagline .em{color:var(--amber);font-weight:600}

.masthead-meta{
  text-align:right;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-4);
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-end;
}
.masthead-meta .live{color:var(--green)}
.masthead-meta .live::before{
  content:'●';
  margin-right:6px;
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* User pill — beveled chip, lives in masthead-meta */
.user-pill{
  display:none;
  align-items:center;gap:8px;
  padding:4px 10px;
  background:var(--paper-bright);
  color:var(--ink);
  border:1.5px solid var(--ink);
  font-family:'VT323','IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:0.02em;
  cursor:pointer;
  margin-top:6px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8b8775,
    1px 1px 0 var(--ink);
}
.user-pill:hover{background:#fffaea}
.user-pill:active{
  box-shadow:
    inset -1px -1px 0 #fff,
    inset 1px 1px 0 #8b8775,
    0 0 0 var(--ink);
  transform:translate(1px,1px);
}
.user-pill .avatar{
  width:16px;height:16px;
  background:var(--ink);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;line-height:1;
}

/* =========================================================================
   SEARCH
   ========================================================================= */
.search-wrap{
  max-width:1200px;
  margin:24px auto 16px;
  padding:0 24px;
}
.search-box{
  position:relative;
  background:var(--paper-bright);
  border:var(--border);
  box-shadow:var(--shadow-sm);
}
.search-box svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--ink);width:16px;height:16px;
}
.search-box input{
  width:100%;
  padding:14px 16px 14px 40px;
  background:transparent;
  border:none;
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  outline:none;
}
.search-box input::placeholder{color:var(--ink-4);text-transform:uppercase;letter-spacing:0.08em;font-size:12px}
.search-box::before{
  content:'QUERY';
  position:absolute;top:-2px;left:-2px;
  background:var(--ink);color:var(--paper);
  font-size:9px;font-weight:600;letter-spacing:0.12em;
  padding:2px 8px;
}

/* =========================================================================
   FILTER PILLS — pseudo-tabs
   ========================================================================= */
.controls{
  max-width:1200px;
  margin:0 auto 12px;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-bottom:1px solid var(--ink);
}
.pill{
  background:transparent;
  border:none;
  border-right:1px solid var(--ink-4);
  color:var(--ink-2);
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:10px 18px;
  cursor:pointer;
  position:relative;
  transition:none;
}
.pill:hover{background:var(--paper-dim);color:var(--ink)}
.pill.active{
  background:var(--ink);color:var(--paper);
}
.pill.active::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--amber);
}

/* Sort + actions row */
.sort-row{
  max-width:1200px;
  margin:0 auto 16px;
  padding:14px 24px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.sort-group{display:flex;gap:0;border:1.5px solid var(--ink);background:var(--paper-bright)}
.sort-pill{
  background:transparent;border:none;
  border-right:1px solid var(--ink);
  color:var(--ink-2);
  font-family:inherit;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.1em;
  padding:8px 14px;cursor:pointer;
}
.sort-pill:last-child{border-right:none}
.sort-pill:hover{background:var(--paper-dim);color:var(--ink)}
.sort-pill.active{background:var(--ink);color:var(--paper)}
.sort-label{
  font-size:10px;text-transform:uppercase;letter-spacing:0.12em;
  color:var(--ink-3);margin-right:6px;
}

.action-group{display:flex;gap:10px}
/* System 7 beveled button — bright top/left, dark bottom/right */
.submit-btn,.random-btn,.load-more-btn,.copy-btn,.comment-form button{
  font-family:inherit;font-weight:600;
  letter-spacing:0.04em;
  cursor:pointer;
  border:1.5px solid var(--ink);
  background:var(--paper-bright);color:var(--ink);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1.5px -1.5px 0 #8b8775,
    2px 2px 0 var(--ink);
  transition:none;
}
.submit-btn,.random-btn{
  font-size:12px;text-transform:uppercase;
  padding:7px 14px;
  display:inline-flex;align-items:center;gap:6px;
}
.submit-btn:active,.random-btn:active,.load-more-btn:active,.copy-btn:active,.comment-form button:active{
  /* Inverted bevel + drop shadow shrink */
  box-shadow:
    inset -1.5px -1.5px 0 #fff,
    inset 1.5px 1.5px 0 #8b8775,
    0 0 0 var(--ink);
  transform:translate(2px,2px);
}
.submit-btn:hover{background:#cce8da}
.random-btn:hover{background:#ffe4ad}

/* =========================================================================
   COUNTER / metadata strip
   ========================================================================= */
.counter{
  max-width:1200px;
  margin:0 auto 16px;
  padding:0 24px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-3);
}
.counter span{color:var(--ink);font-weight:600}

/* =========================================================================
   GRID (research-listing layout)
   ========================================================================= */
.grid{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 24px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:18px;
}

/* =========================================================================
   CARD — Bloomberg research-entry crossed with Mac document
   ========================================================================= */
.card{
  background:var(--paper-bright);
  border:var(--border);
  box-shadow:var(--shadow);
  position:relative;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .1s,box-shadow .1s;
}
.card:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}
.card:active{transform:translate(2px,2px);box-shadow:none}

/* Header bar of card — System 7 active-window striped title bar.
   Horizontal pinstripes with inset white text blocks for the labels. */
.card-bar{
  background-color:var(--paper-bright);
  background-image:repeating-linear-gradient(
    180deg,
    var(--ink) 0,var(--ink) 1px,
    var(--paper-bright) 1px,var(--paper-bright) 3px
  );
  border-bottom:1.5px solid var(--ink);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:3px 8px;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  min-height:22px;
}
.card-ticker{
  background:var(--paper-bright);
  padding:1px 8px;
  font-weight:700;
  color:var(--ink);
  border:1px solid var(--ink);
  font-family:'VT323',monospace;
  font-size:13px;
  letter-spacing:0.05em;
  line-height:1;
}
.card-ticker::before{content:'VS:'}
.card-cat{
  background:var(--paper-bright);
  font-weight:700;
  padding:1px 8px;
  border:1px solid var(--ink);
  line-height:1;
  font-family:'VT323',monospace;
  font-size:13px;
  letter-spacing:0.05em;
}
/* Category insets — colored bg with black ink */
.card-cat.cat-rejection{background:#ffd5d8}
.card-cat.cat-jargon{background:#e0d5ff}
.card-cat.cat-fundraising{background:#cce8da}
.card-cat.cat-metrics{background:#ffe4ad}
.card-cat.cat-culture{background:#ffd5e7}
.card-cat.cat-negotiation{background:#cce0f4}
.card-cat.cat-fund{background:#d9d0ec}
.card-cat.cat-exit{background:#fcd9b8}
.card-cat.cat-ai{background:#c2eded}

/* Vote bar (ticker style) on the side */
.card-inner{
  display:flex;flex:1;min-height:0;
}
.card-votes{
  background:var(--paper-dim);
  border-right:1.5px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 8px;gap:4px;min-width:54px;
}
.vote-btn{
  background:none;border:none;cursor:pointer;
  color:var(--ink-3);padding:4px;display:flex;
  font-family:inherit;font-size:14px;font-weight:700;
}
.vote-btn:hover{color:var(--amber)}
.vote-btn.upvoted{color:var(--green)}
.vote-btn.downvoted{color:var(--red)}
.vote-score{
  font-size:18px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
  min-width:28px;text-align:center;
}
.vote-score.positive{color:var(--green)}
.vote-score.negative{color:var(--red)}

/* Card body */
.card-body{flex:1;padding:16px 18px}
.card-phrase{
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink);
  margin-bottom:12px;
  letter-spacing:-0.01em;
}
.card-phrase::before{content:'» ';color:var(--amber);font-weight:400}

.real-label{
  font-size:9px;text-transform:uppercase;letter-spacing:0.18em;
  color:var(--red);font-weight:700;margin-bottom:4px;
  display:flex;align-items:center;gap:6px;
}
.real-label::after{
  content:'';flex:1;height:1px;background:var(--ink-4);
}
.real-text{
  font-size:13px;color:var(--ink);line-height:1.5;
  margin-bottom:14px;
}

.card-footer{
  border-top:1px dashed var(--ink-4);
  padding:10px 18px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  background:var(--paper);
}
.card-definition{
  font-size:11px;color:var(--ink-3);line-height:1.5;
  flex:1;
}
.card-definition::before{
  content:'DEF:';color:var(--ink);font-weight:700;letter-spacing:0.1em;margin-right:6px;
}
.card-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.card-comments-count{
  font-size:10px;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:3px;
  text-transform:uppercase;letter-spacing:0.1em;
}
.copy-btn{
  background:none;border:1.5px solid var(--ink);
  color:var(--ink);cursor:pointer;
  padding:4px 6px;display:flex;
}
.copy-btn:hover{background:var(--ink);color:var(--paper)}
.copy-btn.copied{background:var(--green);color:var(--paper);border-color:var(--green)}

/* =========================================================================
   LOAD MORE
   ========================================================================= */
.load-more-wrap{text-align:center;padding:18px 24px}
.load-more-btn{
  font-family:inherit;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.12em;
  padding:12px 32px;cursor:pointer;
  border:var(--border);background:var(--paper-bright);color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.load-more-btn:hover{background:var(--ink);color:var(--paper)}
.load-more-btn:active{transform:translate(2px,2px);box-shadow:none}

/* Empty / loading */
.empty,.loading{
  text-align:center;padding:60px 24px;color:var(--ink-3);
  font-size:13px;
  border:var(--border);
  border-style:dashed;
  background:var(--paper-bright);
}
.empty h3{color:var(--ink);margin-bottom:8px;font-size:16px}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}
.spinner{
  display:inline-block;width:20px;height:20px;
  border:2px solid var(--ink-4);border-top-color:var(--ink);
  animation:spin .8s linear infinite;margin-bottom:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================================
   MODAL — classic Mac window
   ========================================================================= */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(13,13,10,0.65);
  z-index:100;display:none;
  align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--paper-bright);
  border:var(--border);
  box-shadow:6px 6px 0 var(--ink);
  max-width:580px;width:100%;
  max-height:90vh;
  display:flex;flex-direction:column;
  position:relative;
  animation:windowOpen .15s cubic-bezier(.5,1.6,.5,1);
}
@keyframes windowOpen{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* Mac window title bar — System 7 active-window pinstripes */
.mac-titlebar{
  background-image:repeating-linear-gradient(
    180deg,
    var(--ink) 0,var(--ink) 1px,
    var(--paper-bright) 1px,var(--paper-bright) 3px
  );
  border-bottom:1.5px solid var(--ink);
  display:flex;align-items:center;
  padding:4px 6px;gap:6px;
}
/* Close box — left side */
.mac-close{
  width:13px;height:13px;
  border:1.5px solid var(--ink);
  background:var(--paper-bright);
  cursor:pointer;flex-shrink:0;
  position:relative;padding:0;
}
.mac-close:hover{background:#fff}
.mac-close::before{
  content:'';position:absolute;inset:1px;
  background:var(--ink);opacity:0;
}
.mac-close:hover::before{opacity:1}
/* Zoom box — right side, classic nested square */
.mac-zoom{
  width:13px;height:13px;
  border:1.5px solid var(--ink);
  background:var(--paper-bright);
  flex-shrink:0;cursor:default;
  position:relative;padding:0;
}
.mac-zoom::after{
  content:'';position:absolute;
  top:1.5px;left:1.5px;right:4px;bottom:4px;
  border:1.5px solid var(--ink);
}
/* Title in inset white block, centered */
.mac-titlebar-title{
  flex:1;text-align:center;
  background:var(--paper-bright);
  padding:1px 16px;margin:0 4px;
  font-family:'VT323','IBM Plex Mono',monospace;
  font-size:14px;font-weight:400;
  text-transform:none;letter-spacing:0.04em;
  color:var(--ink);
  border:1px solid var(--ink);
  line-height:1.3;
}

.modal-content{
  padding:24px 26px;
  overflow-y:auto;
  flex:1;
}

/* Spotlight specific */
.spotlight .card-phrase{font-size:22px;margin-bottom:16px}
.spotlight .card-cat{
  display:inline-block;font-size:10px;
  padding:3px 8px;border:1.5px solid currentColor;
  margin-bottom:18px;font-weight:600;
}
.spotlight .real-label{margin-bottom:6px}
.spotlight .real-text{font-size:15px;margin-bottom:20px}
.spotlight .card-definition{
  font-size:13px;padding:14px 16px;
  background:var(--paper-dim);
  border-left:3px solid var(--ink);
  margin:0 0 14px;display:block;color:var(--ink);
}
.spotlight .def-label{
  display:block;font-size:9px;text-transform:uppercase;letter-spacing:0.18em;
  color:var(--ink-3);font-weight:700;margin-bottom:4px;
}
.spotlight-example{
  margin-top:14px;padding:14px 16px;
  background:var(--paper-dim);
  border-left:3px solid var(--amber);
}
.spotlight-example .ex-label{
  display:block;font-size:9px;text-transform:uppercase;letter-spacing:0.18em;
  color:var(--ink-3);font-weight:700;margin-bottom:4px;
}
.spotlight-example p{font-size:13px;color:var(--ink-2);font-style:italic}
.spotlight-author{
  margin:14px 0 0;font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:0.1em;
}
.spotlight-author span{color:var(--ink);font-weight:600}

.spotlight-votes{
  display:flex;align-items:center;gap:14px;
  margin-top:18px;padding:12px 14px;
  background:var(--paper-dim);
  border:1.5px solid var(--ink);
}
.spotlight-votes .vote-btn{font-size:18px}
.spotlight-votes .vote-score{font-size:22px}

/* =========================================================================
   COMMENTS
   ========================================================================= */
.comments-section{
  margin-top:18px;
  border-top:1px dashed var(--ink-4);
  padding-top:14px;
}
.comments-header{
  font-size:10px;text-transform:uppercase;letter-spacing:0.18em;
  color:var(--ink-3);font-weight:700;margin-bottom:12px;
}
.comment-list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:14px;max-height:300px;overflow-y:auto;
}
.comment-item{
  padding:10px 12px;
  background:var(--paper-dim);
  border:1px solid var(--ink-4);
  border-left:3px solid var(--ink);
}
.comment-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px;
}
.comment-author{
  font-size:11px;font-weight:600;color:var(--ink);
  text-transform:uppercase;letter-spacing:0.08em;
}
.comment-author::before{content:'@';color:var(--amber);margin-right:1px}
.comment-time{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.08em}
.comment-body{font-size:13px;color:var(--ink);line-height:1.5}
.comment-empty{
  font-size:12px;color:var(--ink-3);font-style:italic;
  padding:14px;text-align:center;border:1px dashed var(--ink-4);
}
.comment-delete,.comment-flag{
  background:none;border:none;color:var(--ink-3);
  cursor:pointer;font-family:inherit;font-size:10px;
  padding:2px 6px;margin-left:8px;
  text-transform:uppercase;letter-spacing:0.08em;
}
.comment-delete:hover{color:var(--red)}
.comment-flag:hover{color:var(--amber)}

.comment-form{display:flex;gap:8px}
.comment-form textarea{
  flex:1;padding:10px 12px;
  background:var(--paper-bright);
  border:1.5px solid var(--ink);
  color:var(--ink);font-family:inherit;font-size:13px;
  resize:none;outline:none;min-height:38px;max-height:100px;
}
.comment-form textarea:focus{
  background:var(--paper-bright);
  outline:1.5px solid var(--amber);outline-offset:-3px;
}
.comment-form button{
  padding:8px 14px;
  background:var(--ink);color:var(--paper);
  border:1.5px solid var(--ink);
  font-family:inherit;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.1em;
  cursor:pointer;align-self:flex-end;
}
.comment-form button:hover{background:var(--amber);color:var(--ink)}
.comment-form button:disabled{opacity:.4;cursor:not-allowed}

/* =========================================================================
   SUBMIT FORM
   ========================================================================= */
.submit-modal h2{
  font-family:inherit;font-size:20px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
  margin-bottom:6px;color:var(--ink);
}
.submit-modal h2::before{content:'» ';color:var(--amber);font-weight:400}
.submit-modal .subtitle{
  font-size:12px;color:var(--ink-3);
  margin-bottom:22px;text-transform:uppercase;letter-spacing:0.06em;
}

.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.18em;
  color:var(--ink);margin-bottom:6px;
}
.form-group label::after{
  content:':';color:var(--amber);
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;padding:10px 12px;
  background:var(--paper-bright);
  border:1.5px solid var(--ink);
  color:var(--ink);font-family:inherit;font-size:14px;
  outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:1.5px solid var(--amber);outline-offset:-3px;
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--ink-4);font-size:13px;
}
.form-group textarea{resize:vertical;min-height:70px}
.form-group select{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23161611' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:32px;
}
.form-group .hint{
  font-size:10px;color:var(--ink-3);margin-top:4px;
  text-transform:uppercase;letter-spacing:0.08em;
}
.form-group .char-count{
  font-size:10px;color:var(--ink-3);text-align:right;margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:0.08em;
}

/* Default action button — System 7 default-button look: heavy outer ring + bevel */
.submit-form-btn{
  width:100%;padding:13px;
  background:var(--paper-bright);color:var(--ink);
  border:1.5px solid var(--ink);
  outline:2px solid var(--ink);
  outline-offset:2px;
  font-family:inherit;font-size:14px;font-weight:700;
  letter-spacing:0.04em;
  cursor:pointer;
  margin-top:6px;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1.5px -1.5px 0 #8b8775,
    2px 2px 0 var(--ink);
}
.submit-form-btn:hover{background:#fffaea}
.submit-form-btn:active{
  box-shadow:
    inset -1.5px -1.5px 0 #fff,
    inset 1.5px 1.5px 0 #8b8775,
    0 0 0 var(--ink);
  transform:translate(2px,2px);
}
.submit-form-btn:disabled{opacity:.4;cursor:not-allowed}

.submit-success{text-align:center;padding:24px 12px}
.submit-success .check-icon{
  font-size:36px;margin-bottom:12px;color:var(--green);
}
.submit-success h3{
  margin-bottom:8px;color:var(--green);
  text-transform:uppercase;letter-spacing:0.1em;font-size:18px;
}
.submit-success p{color:var(--ink-2);font-size:13px}

/* =========================================================================
   NICKNAME MODAL
   ========================================================================= */
.nickname-modal .modal{max-width:420px}
.nickname-modal .modal-content{padding:28px;text-align:center}
.nickname-modal h2{
  font-size:18px;text-transform:uppercase;letter-spacing:0.04em;
  margin-bottom:6px;
}
.nickname-modal h2::before{content:'» ';color:var(--amber);font-weight:400}
.nickname-modal .subtitle{
  font-size:12px;color:var(--ink-3);margin-bottom:18px;
  text-transform:uppercase;letter-spacing:0.08em;
}
.nickname-modal input{text-align:center;font-size:16px;padding:12px}
.nickname-modal .nickname-submit{
  margin-top:14px;padding:11px 36px;
  background:var(--paper-bright);color:var(--ink);
  border:1.5px solid var(--ink);
  outline:2px solid var(--ink);outline-offset:2px;
  font-family:inherit;font-weight:700;font-size:13px;
  letter-spacing:0.04em;cursor:pointer;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1.5px -1.5px 0 #8b8775,
    2px 2px 0 var(--ink);
}
.nickname-modal .nickname-submit:hover{background:#fffaea}
.nickname-modal .nickname-submit:active{
  box-shadow:
    inset -1.5px -1.5px 0 #fff,
    inset 1.5px 1.5px 0 #8b8775,
    0 0 0 var(--ink);
  transform:translate(2px,2px);
}

/* =========================================================================
   STATUS BAR — Finder-window style, bottom of main content area
   ========================================================================= */
.status-bar{
  max-width:1200px;
  margin:8px auto 16px;
  padding:0 24px;
  display:flex;
  gap:0;
  font-family:'VT323','IBM Plex Mono',monospace;
  font-size:14px;
  letter-spacing:0.02em;
  color:var(--ink);
}
.status-cell{
  background:var(--paper-bright);
  border:1.5px solid var(--ink);
  padding:3px 14px;
  flex:1;
  text-align:center;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #8b8775;
  border-right-width:0;
}
.status-cell:last-child{border-right-width:1.5px}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  max-width:1200px;
  margin:32px auto 0;
  padding:20px 24px;
  border-top:var(--border);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--ink-3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.footer a{color:var(--ink);text-decoration:none;font-weight:600}
.footer a:hover{color:var(--amber)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .logo{font-size:32px}
  .logo-cursor{height:30px;width:10px}
  .masthead{grid-template-columns:1fr;gap:12px}
  .masthead-meta{text-align:left;align-items:flex-start}
  .controls{padding:0 16px}
  .pill{padding:9px 12px;font-size:10px}
  .modal{box-shadow:3px 3px 0 var(--ink)}
  .card{box-shadow:3px 3px 0 var(--ink)}
  .card:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
}