:root{
  --bg: #0b0d0c;
  --bg2:#0f1210;
  --text:#f2efe6;
  --muted:#b8b1a4;
  --line:#1e2420;
  --accent:#6d8a66;   /* muted green */
  --accent2:#b39b63;  /* aged gold */
  --danger:#cc6b6b;
  --radius:18px;
  --max: 780px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 10% 0%, #111514 0%, var(--bg) 55%);
  color:var(--text);
  font-family: var(--serif);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--text)}
img{max-width:100%; height:auto; display:block; border-radius: 14px}

img.story-image {
    display: block;
    max-width: 100%;
    max-height: 70vh;   /* ← key line */
    margin: 32px 0;     /* left-aligned */
    object-fit: contain;
}

.wrap{max-width:var(--max); margin:0 auto; padding: 0 20px}
.main{padding: 44px 0 56px}

.site-header, .site-footer, .admin-header{
  border-bottom: 1px solid var(--line);
}
.site-footer{
  border-top: 1px solid var(--line);
  border-bottom:none;
  padding: 18px 0 28px;
  color: var(--muted);
}
.site-header{
  padding: 18px 0;
  background: linear-gradient(to bottom, rgba(15,18,16,0.65), rgba(15,18,16,0.0));
}

.admin-header{
  padding: 16px 0;
  background: linear-gradient(to bottom, rgba(15,18,16,0.9), rgba(15,18,16,0.0));
}

.site-header .wrap{
  position: relative;
}

.site-header .brand{
  display: inline-block;
}

.site-header .nav{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.brand{
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand:hover{color:var(--text)}

.brand {
  margin-left: -0.14em;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}
.nav a{padding: 6px 8px; border-radius: 10px}
.nav a:hover{background: rgba(255,255,255,0.04); color: var(--text)}

.quiet{color:var(--muted)}
.small{font-size: 11px}
.small{font-size: 11px}
.mono{font-family:var(--mono)}
.right{text-align:right}

.page-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 18px 22px;
  letter-spacing: 0.01em;
}

.story-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 18px 0;
}

.story{
  padding-top: 10px;
}
.story-figure{margin: 18px 0 22px}
.story-body{
  font-size: 16px;
  color: var(--text);
}
.story-body br{content:""; display:block; margin: 10px 0}

.library-list li {
    margin-bottom: 22px;
}

.library-list a {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    opacity: 0.85;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.library-list a:hover {
    opacity: 1;
    border-color: rgba(255,255,255,0.25);
}

.card{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius);
  padding: 16px;
}
.narrow{max-width: 440px; margin: 20px auto}

.form{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.label{
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 8px;
}
.input, .textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
  font-family: var(--sans);
  font-size: 14px;
}
.textarea{
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
}
.input:focus, .textarea:focus{
  border-color: rgba(179,155,99,0.55);
  box-shadow: 0 0 0 4px rgba(179,155,99,0.10);
}

.btn{
  display:inline-block;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(179,155,99,0.35);
  background: rgba(179,155,99,0.10);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  cursor:pointer;
}
.btn:hover{
  border-color: rgba(179,155,99,0.55);
  background: rgba(179,155,99,0.14);
}
.btn.ghost{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.btn.ghost:hover{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}

.form-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 6px;
}

.check{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  font-family: var(--sans);
}
.check input{transform: scale(1.1)}

.flash-stack{display:flex; flex-direction:column; gap: 8px; margin: 0 0 14px}
.flash{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-family: var(--sans);
  font-size: 14px;
}
.flash.ok{border-color: rgba(109,138,102,0.45)}
.flash.error{border-color: rgba(204,107,107,0.55)}

.admin-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-actions{display:flex; gap: 10px}

.table-wrap{overflow:auto; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.08)}
.table{
  width:100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 11px;
}
.table thead th{
  text-align:left;
  padding: 12px 12px;
  color: var(--muted);
  font-weight: 600;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.table tbody tr:hover td{background: rgba(255,255,255,0.02)}
.table.tight thead th, .table.tight tbody td{padding: 10px 10px}

.row-title{font-size: 14px}
.row-subtle{color: var(--muted); font-size: 12px; margin-top: 4px}

.link{
  background:none;
  border:none;
  padding:0;
  margin:0 10px 0 0;
  cursor:pointer;
  color: var(--accent2);
  font-family: var(--sans);
  font-size: 13px;
}
.link:hover{color: var(--text)}
.link.danger{color: var(--danger)}
.inline{display:inline}

.grid-2, .grid-3{
  display:grid;
  gap: 12px;
}
.grid-2{grid-template-columns: 1fr}
.grid-3{grid-template-columns: 1fr}
@media (min-width: 820px){
  .grid-2{grid-template-columns: 1fr 1fr}
  .grid-3{grid-template-columns: 1fr 1fr 1fr}
}

.kicker{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.big{font-size: 34px; line-height:1.1}

.mini-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mini-list li{display:flex; justify-content:space-between; gap: 10px}

.pre{
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  overflow:auto;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}
.subhead{
  font-family: var(--sans);
  font-size: 14px;
  margin: 0 0 8px;
}

.admin-left, .admin-right{display:flex; align-items:center; gap: 14px}
.subtle{color: var(--muted); font-family: var(--sans); font-size: 13px}
.subtle:hover{color: var(--text)}

/* --- Frontend mobile breathing room fix --- */
@media (max-width: 600px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* --- Tablet breathing room fix --- */
@media (min-width: 601px) and (max-width: 900px) {
  .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Align header brand with content column */
.site-header .wrap {
  justify-content: flex-start;
}

.site-header .nav {
  margin-left: auto;
}

.story-quote {
    margin-top: 50px;
    padding-left: 18px;
    border-left: 1px solid rgba(212, 175, 55, 0.18);  /* very light gold */
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(212, 175, 55, 0.55);                  /* pale gold text */
    font-style: italic;
}

.site-footer .wrap {
  max-width: none;       /* break out of content rail */
  padding-left: 0;
  padding-right: 0;
}

.quiet {
    margin: 40px auto 0;
    text-align: center;
    font-family: var(--sans);        /* matches STILL ROOM */
    font-size: 0.65rem;              /* slightly smaller for caps */
    letter-spacing: 0.22em;          /* critical for balance */
    text-transform: uppercase;
    color: rgba(232, 230, 227, 0.42);
}