:root {
  --frame-size: 1280px;
  --inner-width: 880px; /* largura do conteúdo interno (alinha ascii e tudo) */
  --gutter: 28px;
  --mono: "Courier New", Courier, monospace;
}

/* Reset leve */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }

body{
  font-family: var(--mono);
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  color: #111;
}

/* Stage central: controla alinhamento do ASCII e da frame */
.stage {
  width: var(--frame-size);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ASCII - fora da frame, por cima, alinhado horizontalmente com a inner (mesma largura) */
.ascii-title {
  position: absolute;
  top: calc(-1 * (120px)); /* sobe acima da frame */
  left: 50%;
  transform: translateX(-50%);
  width: var(--inner-width);
  text-align: center;
  font-size: 18px;
  line-height: 0.95;
  color: #222;
  pointer-events: none;
  margin: 0;
  padding: 6px 0;
  white-space: pre;
}

/* Frame fixa 1280x1280 */
.frame {
  width: var(--frame-size);
  height: var(--frame-size);
  background: #fff;
  border: 6px solid #000;
  box-shadow: 0 10px 0 #cfcfcf;
  display: flex;
  flex-direction: column;
  overflow: auto; /* permitimos rolagem interna em viewports menores */
  padding-top: 140px; /* espaço superior para que o conteúdo fique alinhado com o ASCII visualmente */
}

/* Container com borda interna e conteúdo centrado */
.container {
  margin: 0 var(--gutter);
  background: #fff;
  border: 3px solid #000;
  padding: 10px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* pequeno ícone no topo da container (alinha com ascii) */
.top-icon { margin-bottom: 8px; font-size: 12px; }

/* inner: largura fixa e centralizada — é a "coluna" que deve alinhar com o ASCII */
.inner {
  width: var(--inner-width);
  margin: 0 auto;
}

/* intro e estilos básicos */
.intro { font-size: 13px; margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid #999; }
.intro a { color: #1a4bd6; text-decoration: underline; }

/* grid interno */
.content-grid {
  display: grid;
  grid-template-columns: 120px 1fr 140px;
  gap: 12px;
  padding: 12px 0;
  align-items: start;
}

/* left nav (vertical) */
.left-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-btn {
  display: block;
  text-align: center;
  padding: 8px 6px;
  border: 2px solid #111;
  background: #fff;
  text-decoration: none;
  color: #0b0b0b;
  font-size: 13px;
  box-shadow: 2px 2px 0 #cfcfcf;
}

/* área central */
.center { min-width: 200px; }

/* linha de ícones no topo da área central em grade */
.icon-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  border: 2px solid #000;
  background: #fff;
  text-decoration: none;
  color: #000;
  font-size: 12px;
}
.icon-placeholder { color: #666; font-size: 12px; }

/* colunas principais dentro da área central */
.main-columns {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  margin-top: 8px;
  align-items: start;
}

.left-column h3 { font-size: 14px; margin-bottom: 6px; }
.left-column p { font-size: 12px; margin-bottom: 8px; }
.notebook {
  border: 1px dashed #888;
  padding: 8px;
  background: #fafafa;
  font-size: 12px;
}
.notebook ul { margin-top: 6px; list-style: disc; margin-left: 18px; }
.notebook li { padding: 2px 0; }

/* aside direito dentro da área central */
.right-column { font-size: 12px; }
.work-image { border: 2px solid #000; padding: 12px; margin-bottom: 10px; background: #fff; display:flex; align-items:center; justify-content:center; height:220px; }
.icon-placeholder.large { font-size: 13px; }
.small-widgets { display:flex; gap:8px; align-items:center; }
.index-box { border: 2px solid #111; padding: 10px; background: #fff; font-weight: bold; }
.tiny-note { font-size: 11px; color:#555; }

/* coluna direita pequena */
.right-nav { display:flex; flex-direction: column; gap:8px; }
.mini-box { border:2px solid #111; padding:6px; background:#fff; text-align:center; font-size:12px; }

/* footer com a arte "mentally here" */
.page-footer { margin-top: 12px; text-align:center; padding: 12px 0 28px; }
.mentally-here { padding: 10px 0; }
.mh-text { font-size: 20px; margin-bottom: 10px; }
.mh-text .here { color: #1a5bd6; font-style: italic; }
.mh-art { display:flex; justify-content:center; align-items:center; }
.icon-placeholder.xlarge { display:inline-block; width: 640px; height: 360px; border:2px solid #000; background:#fff; line-height:360px; vertical-align:middle; }

/* Responsividade: quando a tela for menor que a frame, permitimos rolagem da página.
   Mantemos o alinhamento ASCII <-> inner mesmo quando encolhido (o ASCII permanece centrado ao inner). */
@media (max-width: 1320px) {
  /* pequena escala para caber melhor em telas um pouco menores */
  .stage { transform: scale(0.95); transform-origin: top center; }
}
@media (max-width: 1000px) {
  /* em telas pequenas removemos o scale e deixamos a frame rolar verticalmente */
  .stage { transform: none; width: 100%; }
  .frame { width: 100%; height: auto; padding-top: 120px; }
  :root { --inner-width: calc(100% - 56px); } /* inner fica fluida */
  .ascii-title { width: var(--inner-width); left: 50%; transform: translateX(-50%); top: 10px; position: relative; }
  .container { margin: 0 16px; }
  .content-grid { grid-template-columns: 80px 1fr; }
  .icon-row { grid-template-columns: repeat(4, 1fr); }
  .right-nav { display: none; }
  .icon-placeholder.xlarge { width: 90%; height: 220px; line-height:220px; }
}