:root {
  --bg: #070606;
  --ink: #e6d6c8;
  --muted: rgba(230, 214, 200, 0.72);
  --edge: rgba(230, 214, 200, 0.14);
  --rust: #8b2b2b;
  --amber: #b56a2a;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond,
    "Times New Roman", Times, serif;

  /* dark “storefront panel” */
  --paper: #0d0b0b;
  --paper-ink: #e6d6c8;
  --paper-edge: #3a2c26;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* On very tall viewports, the page can end early and reveal the slightly darker
   body background below the table. Match the blog home background to the panel
   color so it looks continuous. */
body.blog-home {
  background: var(--paper);
}

body.blog-home .retro-wrap {
  min-height: 100vh;
}

/* homepage: clip only, centered */
.home-stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
}

.home-clip {
  width: min(560px, 92vw);
}

/* bottom-left “footer” image */
.footer-left {
  position: fixed;
  left: 0;
  bottom: 60px;
  margin: 0;
  padding: 0;
  z-index: 5;
}

.footer-label {
  margin: 0 0 4px;
  padding-left: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: rgba(230, 214, 200, 0.8);
}

.footer-left img {
  display: block;
  max-height: 120px;
  width: auto;
  max-width: min(520px, 100vw);
  height: auto;
}

.home-stage {
  padding-bottom: calc(clamp(18px, 4vw, 48px) + 132px);
}

/* shared video frame */
.frame {
  width: 100%;
  border: 2px ridge var(--paper-edge);
  background: var(--paper);
}

.ratio {
  aspect-ratio: 16 / 9;
  position: relative;
}

.clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* “1995 storefront” helper styles used under /opensesame/ */
.retro-wrap {
  padding: 18px 12px 160px;
}

.retro {
  width: min(760px, 94vw);
  border: 2px ridge var(--paper-edge);
  background: var(--paper);
  color: var(--paper-ink);
}

.retro td {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1.35;
}

.retro a:link {
  color: #7aa2ff;
}
.retro a:visited {
  color: #c792ea;
}
.retro a:active {
  color: #ff6b6b;
}

.retro-hr {
  border: 0;
  border-top: 1px solid rgba(230, 214, 200, 0.18);
  height: 0;
}

/* 4chan-ish post image thumbnail (keep aspect ratio) */
.postimg {
  display: block;
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  float: left;
  margin: 2px 14px 4px 0;
}

/* when the thumbnail sits in its own column (above the post body) */
.postimg-top {
  float: none;
  margin: 0 auto 4px;
}

/* blog logo image (square crop) */
.logoimg {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  margin: 0 auto 4px;
}

.logo-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.logo-wrap:focus-visible {
  outline: 2px solid rgba(232, 186, 120, 0.7);
  outline-offset: 2px;
}

.mccrisp-overlay {
  position: absolute;
  left: -30px;
  top: -20px;
  width: 170px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-10deg);
}

.logo-wrap.is-fired .mccrisp-overlay {
  opacity: 1;
}

.clear {
  clear: both;
}

/* language switch + quotes (post pages) */
.langswitch {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  white-space: nowrap;
}

.langswitch a {
  color: var(--paper-ink);
  text-decoration: none;
  border: 2px ridge var(--paper-edge);
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 7px;
  display: inline-block;
}

.langswitch a:visited {
  color: var(--paper-ink);
}

.langswitch .sep {
  color: rgba(230, 214, 200, 0.45);
  padding: 0 4px;
}

.quote {
  margin: 10px 0 12px;
  padding: 6px 8px;
  border: 1px dashed rgba(230, 214, 200, 0.28);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(232, 186, 120, 0.96); /* warm amber */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.35;
}

.lang {
  display: none;
}

.posttext {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-ink);
}

.posttext p {
  margin: 10px 0;
}

.posttitle {
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.inlineimg {
  display: block;
  max-width: min(520px, 86%);
  height: auto;
  margin: 12px auto 6px;
  border: 2px ridge var(--paper-edge);
}

.inlineimg-50 {
  max-width: min(520px, 45%);
}

.inlineimg-30 {
  max-width: min(520px, 30%);
}

.caption {
  margin: 0 0 14px;
}

.embed {
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  margin: 12px auto 16px;
  border: 2px ridge var(--paper-edge);
  background: #000;
  position: relative;
}

.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.xembed {
  width: min(560px, 100%);
  margin: 12px auto 16px;
}

.xembed.sm {
  width: min(340px, 100%);
}

/* keep X/Twitter embeds responsive-ish */
.twitter-tweet {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}

.twitter-tweet iframe {
  max-width: 100% !important;
}

.lang-tr {
  display: block; /* default */
}

/* no-scroll language toggle (JS sets html[data-lang]) */
html[data-lang="tr"] .lang-tr,
html[data-lang="en"] .lang-en {
  display: block;
}

html[data-lang="tr"] .lang-en,
html[data-lang="en"] .lang-tr {
  display: none;
}

/* mobile: fit screen without changing the layout (still image-left) */
@media (max-width: 560px) {
  .retro-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* keep table layout, just prevent overflow */
  .retro {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }

  /* only pad the OUTER retro table cells (not nested tables) */
  .retro > tbody > tr > td {
    padding: 8px !important; /* overrides cellpadding visually */
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* shrink the left image column on post/index header rows */
  .retro tr:first-child td:first-child {
    width: clamp(140px, 42vw, 200px) !important;
  }

  /* blog home: logo shouldn't have huge side gutters */
  .blog-home .retro tr:first-child td:first-child {
    width: 140px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* keep header thumbnails readable */
  .postimg-top {
    max-width: clamp(140px, 42vw, 200px);
    max-height: 200px;
  }

  .logoimg {
    width: 124px;
    height: 124px;
  }

  .langswitch {
    font-size: 11px;
  }

  .langswitch a {
    padding: 1px 6px;
  }

  /* prevent huge serif titles from wrapping per-word */
  .posttitle {
    font-size: 20px !important;
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* blog home: give the right column breathing room */
  .home-intro {
    padding-left: 14px !important;
  }

  .footer-left img {
    max-height: 96px;
  }

  /* on small screens, don’t make centered images tiny */
  .inlineimg,
  .inlineimg-50,
  .inlineimg-30 {
    max-width: min(520px, 86%);
  }
}