/*
Theme Name: Inkezny 2011
Theme URI: https://inkezny.com/
Author: Restored from Internet Archive captures (May-Dec 2011)
Description: Faithful reconstruction of the inkezny.com pre-launch splash page as it stood in 2011. Layout, palette, dimensions and behaviour are taken from the six Wayback Machine captures of the original ASP.NET MVC page. Original text was baked into PNG images that were never archived; copy has been rebuilt as real, selectable HTML text.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: inkezny2011
*/

/* ---- palette recovered from the original inline styles ----
   #F00000  body background      (Aug-Dec 2011 build)
   #9D0A0A  body background      (May 2011 build)
   #000000  header bar           (May 2011 build)
   #333333  body copy
   #e9e9e9  email input fill
   Lucida Sans Unicode 22px bold - original form font
   543px hero / 504px email box + button - original widths
------------------------------------------------------------ */

:root {
  --ink-red: #F00000;
  --ink-red-deep: #9D0A0A;
  --ink-ink: #333333;
  --ink-fill: #e9e9e9;
  --ink-w: 543px;
  --ink-wn: 504px;
  --ink-font: "Lucida Sans Unicode", "Lucida Grande", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

/* This is a restoration of a 2011 page: its palette is the artefact.
   Opt out of Chrome's auto-dark-mode so the red/white scheme is never
   machine-inverted on a viewer running a dark system theme. */
html {
  -webkit-text-size-adjust: 100%;
  color-scheme: only light;
}

body {
  margin: 0;
  margin-top: 10px;
  background-color: var(--ink-red);
  font-family: var(--ink-font);
  color: var(--ink-ink);
  min-height: 100vh;
}

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

a { color: var(--ink-red); }

/* ---------- fixed social rail (original: fb_container.png, right:5px, 52x128, vertically centred) ---------- */

.ink-rail {
  position: fixed;
  right: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 128px;
  width: 52px;
  background: #000;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 20;
}

.ink-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #fff;
  opacity: .85;
  transition: opacity .15s ease, transform .15s ease;
}

.ink-rail a:hover,
.ink-rail a:focus-visible { opacity: 1; transform: scale(1.12); }

.ink-rail svg { width: 26px; height: 26px; fill: currentColor; display: block; }

/* ---------- white content panel (original: width:100%, background-color:White) ---------- */

.ink-panel {
  width: 100%;
  min-height: calc(100vh - 10px);
  background: #fff;
  padding: 48px 20px 64px;
}

.ink-wrap {
  width: var(--ink-w);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- hero: rebuilt from content.png / englishtext.png / arabictext.png ---------- */

.ink-hero { text-align: center; }

.ink-logo {
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-red);
  margin: 0 0 6px;
}

.ink-logo .ink-dot { color: var(--ink-ink); }

.ink-tagline {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink-ink);
  margin: 0 0 18px;
}

.ink-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #555;
  margin: 0 auto 28px;
  max-width: 470px;
}

.ink-desc p { margin: 0 0 10px; }
.ink-desc p:last-child { margin-bottom: 0; }

[hidden] { display: none !important; }

/* ---------- email capture (original: div#eml, emailbox.png, 504x36, POST /Home/AddEmail) ---------- */

.ink-emailbox {
  width: var(--ink-wn);
  max-width: 100%;
  margin: 0 auto 12px;
}

.ink-form { display: flex; gap: 0; }

.ink-input {
  flex: 1 1 auto;
  height: 44px;
  background-color: var(--ink-fill);
  border: 1px solid #d2d2d2;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-ink);
  padding: 0 12px;
  min-width: 0;
}

.ink-input::placeholder { color: #9a9a9a; font-weight: 700; }
.ink-input:focus { outline: 2px solid var(--ink-red); outline-offset: -2px; }

.ink-submit {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 30px;
  background: var(--ink-red);
  color: #fff;
  border: 0;
  border-radius: 0 3px 3px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .15s ease;
}

.ink-submit:hover,
.ink-submit:focus-visible { background: #c40000; }

.ink-note {
  width: var(--ink-wn);
  max-width: 100%;
  margin: 0 auto 26px;
  font-size: 12px;
  color: #8a8a8a;
  text-align: center;
}

.ink-flash {
  width: var(--ink-wn);
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.ink-flash.is-ok { background: #eaf7ea; color: #1d6b1d; border: 1px solid #b9e0b9; }
.ink-flash.is-err { background: #fdeaea; color: #a11; border: 1px solid #f2c0c0; }

/* ---------- share row (original: share.png + ShareThis buttons) ---------- */

.ink-share { text-align: center; margin-top: 30px; }

.ink-share-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 12px;
}

.ink-share-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.ink-share-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 7px 12px;
  transition: border-color .15s ease, color .15s ease;
}

.ink-share-links a:hover,
.ink-share-links a:focus-visible { border-color: var(--ink-red); color: var(--ink-red); }

.ink-share-links svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- provenance footer (not in the 2011 original) ---------- */

.ink-foot {
  text-align: center;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid #eee;
  font-size: 11px;
  line-height: 1.7;
  color: #a8a8a8;
}

.ink-foot a { color: #8a8a8a; }

/* ---------- responsive (the 2011 original was fixed-width; this keeps it usable on phones) ---------- */

@media (max-width: 600px) {
  .ink-panel { padding: 30px 16px 48px; }
  .ink-logo { font-size: 46px; }
  .ink-tagline { font-size: 18px; }
  .ink-form { flex-wrap: wrap; gap: 8px; }
  .ink-input { border-right: 1px solid #d2d2d2; border-radius: 3px; width: 100%; flex: 1 0 100%; }
  .ink-submit { border-radius: 3px; width: 100%; }
  .ink-rail {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    margin: 26px auto 0;
    padding: 10px 18px;
    border-radius: 6px;
    max-width: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}