/*
Theme Name: Embedded Lies Reader
Theme URI: https://embedded-lies.com
Author: Robert W. Olson, Jr.
Description: Layout only — a chapter rail down the left, the story on the right. All text lives in ordinary WordPress Pages and is edited in the normal WordPress editor. The rail builds itself from your published Pages, in the order set by each page's Order field.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: All rights reserved
Text Domain: embedded-lies-reader
*/

:root{
  --baize:#1B3A2B;
  --baize-deep:#12271D;
  --manila:#EDE4CE;
  --manila-dim:#DFD4B7;
  --ink:#231F18;
  --ink-soft:rgba(35,31,24,.66);
  --pencil:#9E2B25;
  --brass:#B4884A;
  --rule:rgba(35,31,24,.18);

  /* --- tuning knobs ------------------------------------------------------
     --el-measure  how wide the reading column may grow
     --el-gutter   the buffer kept either side of the text
     --el-tile     the tallest a rail thumbnail may be            */
  --el-measure:68rem;
  --el-gutter:clamp(20px,4vw,64px);
  --el-tile:88px;

  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--manila);
  color:var(--ink);
  font-family:'Crimson Pro',Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.62;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;}

.el-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--baize);color:var(--manila);}
.el-skip:focus{left:0;}

/* ============================ layout: 1/6 + 5/6 ============================ */
.el-book{
  display:grid;
  grid-template-columns:minmax(150px,1fr) 5fr;
  min-height:100vh;
  max-width:1680px;
  margin:0 auto;
  border-left:1px solid var(--baize-deep);
  border-right:1px solid var(--baize-deep);
}

/* ------------------------------ the rail ---------------------------------- */
.el-rail{
  background:var(--baize);
  border-right:1px solid var(--baize-deep);
  position:sticky; top:0; align-self:start;
  max-height:100vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(237,228,206,.3) transparent;
}
.el-rail__head{margin:0;padding:18px 10px 14px;border-bottom:1px solid rgba(237,228,206,.28);text-align:center;text-decoration:none;display:block;}
.el-rail__head b{
  display:block;
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-weight:700;font-size:17px;line-height:1.1;letter-spacing:.02em;color:var(--manila);
}
.el-rail__head span{
  display:block;margin-top:5px;
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,228,206,.62);
}
.el-rail__list{display:flex;flex-direction:column;}

.el-hole{
  display:block;
  width:100%;margin:0;padding:10px 9px;
  border-bottom:1px solid rgba(237,228,206,.16);
  text-align:left;text-decoration:none;
  transition:background .18s ease;
}
.el-hole:hover{background:rgba(237,228,206,.08);}
.el-hole:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;}

.el-hole__thumb{
  /* whole picture, never cropped: scales down to fit, keeps its own proportions */
  display:block;
  width:auto;height:auto;
  max-width:100%;max-height:var(--el-tile,88px);
  margin:0 auto;
  background:var(--baize-deep);
  border:1px solid rgba(237,228,206,.32);
  filter:saturate(.78) contrast(1.02);
  transition:filter .18s ease,border-color .18s ease;
}
.el-hole:hover .el-hole__thumb{filter:none;}
.el-hole[aria-current="page"] .el-hole__thumb{filter:none;border-color:var(--brass);}
.el-hole__blank{
  display:grid;place-items:center;
  height:var(--el-tile,88px);aspect-ratio:4/3;margin:0 auto;
  background:rgba(237,228,206,.06);border:1px dashed rgba(237,228,206,.28);
  font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:20px;color:rgba(237,228,206,.5);
}
.el-hole__name{
  display:block;margin-top:5px;
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;
  font-size:12.5px;line-height:1.26;letter-spacing:.02em;color:rgba(237,228,206,.72);
}
.el-hole[aria-current="page"] .el-hole__name{color:var(--manila);}

/* ----------------------------- the reading pane --------------------------- */
.el-pane{min-width:0;display:flex;flex-direction:column;}

.el-chapter{
  max-width:var(--el-measure,68rem);
  margin:0 auto;
  padding:clamp(34px,5vw,76px) var(--el-gutter,clamp(20px,4vw,64px)) 16vh;
  width:100%;
}

.el-head{margin:0 0 30px;text-align:center;}
.el-title{
  margin:0;
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-weight:700;font-size:clamp(30px,4.4vw,46px);
  line-height:1.08;letter-spacing:.005em;color:var(--baize-deep);
  text-wrap:balance;
}

/* ---- the page's own content, as WordPress blocks ---- */
.el-content p{margin:0 0 1.05em;text-wrap:pretty;}
.el-content p + p{text-indent:1.35em;}
.el-content p:first-of-type{text-indent:0;}
.el-content p.has-text-align-center{text-indent:0;}
.el-content p.has-small-font-size{font-size:15px;color:var(--ink-soft);text-indent:0;}
.el-content sup{font-size:.68em;color:var(--pencil);font-weight:600;}

.el-content figure,
.el-content .wp-block-image{margin:4px auto 34px;text-align:center;}
.el-content .wp-block-image img{
  display:block;width:100%;max-width:46rem;margin:0 auto;
  border:1px solid var(--rule);
}

/* the club's ornament stands in for a plain separator */
.el-content .wp-block-separator{
  border:0;height:26px;margin:34px auto;max-width:280px;
  background-image:var(--el-orn);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.72;
}

.el-content h2,.el-content h3{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  color:var(--baize-deep);line-height:1.15;
}
.el-content a{color:var(--pencil);}
.el-content blockquote{
  margin:1.4em 0;padding-left:1.1em;border-left:2px solid var(--brass);
  font-style:italic;color:var(--ink-soft);
}

/* end-of-chapter turn */
.el-turn{
  display:flex;justify-content:space-between;gap:16px;
  max-width:var(--el-measure,68rem);margin:0 auto;
  padding:0 var(--el-gutter,clamp(20px,4vw,64px)) 12vh;width:100%;
}
.el-turn a{
  flex:0 1 auto;max-width:47%;
  padding:12px 18px;border:1px solid var(--rule);
  text-align:left;color:var(--ink);text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
.el-turn a:hover{border-color:var(--baize);background:var(--manila-dim);}
.el-turn small{
  display:block;
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
}
.el-turn b{font-weight:400;font-size:17px;}
.el-turn .el-next{text-align:right;margin-left:auto;}

/* WordPress admin bar keeps the sticky rail honest */
.admin-bar .el-rail{top:32px;max-height:calc(100vh - 32px);}

/* -------------------------------- mobile ---------------------------------- */
@media (max-width:820px){
  body{font-size:18px;}
  .el-book{grid-template-columns:1fr;border:0;}
  .el-rail{position:sticky;top:0;z-index:10;max-height:none;border-right:0;border-bottom:1px solid var(--baize-deep);}
  .admin-bar .el-rail{top:46px;max-height:none;}
  .el-rail__head{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:10px;}
  .el-rail__head b{font-size:15px;}
  .el-rail__head span{margin:0;}
  .el-rail__list{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .el-hole{width:112px;flex:0 0 auto;border-bottom:0;border-right:1px solid rgba(237,228,206,.16);}
  .el-chapter{padding:28px 20px 12vh;}
}

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

@media print{
  .el-rail,.el-turn,.el-skip{display:none;}
  .el-book{display:block;}
  .el-chapter{max-width:none;padding:0;}
}