/* Phono.org responsive restoration (non-destructive)
   Goal: keep early-web look, make pages usable on phones.
   Safe overrides only. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 10px;
}

img, video, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

/* Tables were often fixed-width; allow them to shrink */
table { max-width: 100%; }
table[width] { width: 100% !important; }
td, th { max-width: 100%; }

/* Keep centered layouts but prevent horizontal scrolling */
center, .center { display: block; text-align: center; }

pre, code, tt {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Forms */
input, select, textarea, button { max-width: 100%; }

/* Make long URLs wrap */
a { overflow-wrap: anywhere; }

/* Mobile tweaks */
@media (max-width: 600px) {
  body { padding: 8px; font-size: 16px; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
  h3 { font-size: 1.1em; }

  /* Slight breathing room between stacked blocks */
  p, li, blockquote { line-height: 1.35; }

  /* Old pages sometimes use <table><tr><td width=700> ... */
  td[width], th[width] { width: auto !important; display: block; }
  tr { display: block; }
}

.phono-wrapper{
  max-width: 860px;
  margin: 0 auto;
  padding: 0 12px;
}

.phono-table{
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

img{ max-width: 100%; height: auto; }


@media (max-width: 900px){
  .phono-wrapper{ max-width: 100%; }
  .phono-table{ max-width: 100%; }
}