/* Nal Chhen — styles.css */
/* Palette: #000000 #14213d #fca311 #e5e5e5 #ffffff */
:root{
  --ink:#000000;
  --bg:#14213d;
  --accent:#fca311;
  --muted:#e5e5e5;
  --fg:#ffffff;
}

html{ box-sizing:border-box; font-size:calc(7px + 1vmin); }
*,*::before,*::after{ box-sizing:inherit; }

html,body{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  text-align:center;                 /* default center; overridden in .writeup */
  background-color:var(--bg);
  color:var(--fg);
}

header{ color:var(--accent); }
nav, main, footer{ margin:2em auto; }
main, footer{ max-width:52rem; white-space:normal; padding-inline:1rem; }

a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:0.2em;
}
a:hover, a:active, a:visited{ color:var(--muted); }
a:focus-visible{ outline:2px dashed var(--accent); outline-offset:2px; }
a.external::after{ content:"↗"; margin-left:0.25em; font-weight:700; }

nav a{
  display:inline-block;
  margin:0.4em;
  font-weight:800;
  color:var(--muted);
}

/* Helpers */
.nopre{ white-space:normal !important; }
.muted{ color:var(--muted); font-size:0.95em; }

/* ASCII block (optional) */
pre.ascii{
  display:inline-block;
  margin:1em auto;
  text-align:left;
  white-space:pre;
  overflow:auto;
  border-left:3px dashed var(--accent);
  padding-left:0.75rem;
}

/* Lists */
ul{ list-style:none; padding-left:0; text-align:left !important; }
ul > li::before{ content:">  "; color:var(--accent); }
ul ul{ padding:0.5em 0 0.5em 1.25em; }
ul ul > li::before{ content:"+ "; color:var(--accent); }

/* Details/Summary blocks */
details{
  background:rgba(255,255,255,0.03);
  border:1px dashed var(--muted);
  border-radius:6px;
  padding:0.75rem 1rem;
  margin:1rem 0 2rem;
  text-align:left;
}
details[open]{ background:rgba(255,255,255,0.05); }
summary{
  cursor:pointer;
  font-weight:800;
  color:var(--accent);
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }

/* Code */
pre, code, kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}
pre code{
  display:block;
  text-wrap:wrap;
  overflow:auto;
  background:rgba(0,0,0,0.35);
  border:1px dashed var(--muted);
  padding:0.75rem;
  border-radius:6px;
}

/* Command box */
pre.cmd{
  text-align:left;
  margin:1rem auto;
  max-width:52rem;
  padding:.75rem;
  border:1px dashed var(--muted);
  background:rgba(255,255,255,.04);
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Tables */
table, th, td{ border:1px dashed var(--muted); }
table{ margin-inline:auto; width:80%; border-collapse:collapse; display:table; }
table tr{ display:table-row; }
th, td{ padding:0.5rem; }

/* Write-up layout: left-align body text, keep headings centered */
.writeup{
  text-align:left;
  max-width:52rem;
  margin:0 auto;
  line-height:1.55;
  text-wrap:pretty;
}
.writeup h1,
.writeup h2,
.writeup h3{ text-align:center; }

/* Figures & images */
figure{ margin:2rem auto; }
figure img{
  width:100%;
  height:auto;
  border:none;              /* no border */
  display:block;
}
figcaption{
  text-align:left;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--fg);
  max-width: 46rem;
  margin: .75rem auto 0;
  padding: .65rem .9rem;
  background: rgba(69, 65, 65, 0.35);
  border-radius: 10px;
}
figcaption code { color:var(--accent); }

/* Optional image sizing helper */
.img-70{ width:70%; height:auto; display:block; margin:0 auto; }

/* 2-up figures */
.fig-row{
  display:flex; gap:1rem; justify-content:center; align-items:flex-start;
  max-width:52rem; margin:1.25rem auto;
}
.fig-row figure{ flex:1 1 0; margin:0; }
.fig-row img{ width:100%; height:auto; display:block; }
@media (max-width:800px){ .fig-row{ flex-direction:column; } }

/* One-line caption helpers */
.cap-one-line{ white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; }
.cap-wide{ max-width:100%; }
.cap-ellipsis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Click-to-zoom lightbox */
.zoom img{ cursor: zoom-in; }

.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); padding: 2rem;
  cursor: zoom-out;
}
.lightbox:target{ display: flex; }

.lightbox img{
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  background: #111;
}

/* close “×” button */
.lightbox .close{
  position:absolute; top:1rem; right:1rem;
  color:#fff; font-size:2rem; text-decoration:none; line-height:1;
}

/* non-jumping close anchor target */
.lb-close-anchor{
  position: fixed; top:0; left:0; width:1px; height:1px; pointer-events:none;
}

/* Footer */
footer{
  display:inline-block;
  text-align:right;
  color:var(--muted);
  font-size:0.9em;
}


/* --- Image modal / zoom --- */
img.zoomable{ cursor: zoom-in; }

/* prevent background scroll while open */
.no-scroll{ overflow: hidden; }

/* modal shell */
.img-modal{
  position: fixed;
  inset: 0;
  display: none;                 /* hidden by default */
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,.85);
  z-index: 9999;
}
.img-modal.open{ display: flex; }

.img-modal__img{
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,.6);
}

/* close button (still closes on backdrop click, too) */
.img-modal__close{
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
}
.img-modal__close:focus-visible{
  outline: 2px dashed var(--accent, #fca311);
  outline-offset: 4px;
}

/* side-by-side figures */
.fig-row{ display:flex; gap:1rem; justify-content:center; align-items:stretch; }
.fig-row figure{ flex:1 1 48%; margin:0; }
.fig-row figure img{ display:block; width:100%; border-radius:8px; }

/* make both images the same height (no cropping) */
.fig-row.equal img{
  height:260px;            /* pick a height you like */
  object-fit:contain;      /* show whole image, letterbox if needed */
  background:#0c1528;      /* subtle backdrop for letterboxing */
}

/* OR, if you prefer them to fully fill the box (may crop) */
.fig-row.equal.cover img{
  height:260px;
  object-fit:cover;        /* fills box, crops overflow */
}