/* Waltons, Fortitude Valley — shared stylesheet
   Layout: fixed left sidebar navigation + scrollable main column.
   Palette kept from the original heritage/parchment design. */

:root{
  --ink:#1a1a1a;
  --muted:#555;
  --bg:#fbf9f4;
  --accent:#8a1a1a;
  --accent-dark:#6f1414;
  --line:#d8d2c2;
  --card:#f4efe4;
  --sidebar-bg:#f1ebdd;
  --sidebar-w:250px;
}

*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  line-height:1.55;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;
  padding:.5rem .8rem;z-index:200;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0}

/* ---------- Layout ---------- */
.layout{display:flex;align-items:flex-start;min-height:100vh}

.sidebar{
  flex:0 0 var(--sidebar-w);
  width:var(--sidebar-w);
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
  overflow-y:auto;
  background:var(--sidebar-bg);
  border-right:1px solid var(--line);
  padding:1.1rem 0 2rem;
  font-size:.92rem;
}

.main{
  flex:1 1 auto;
  min-width:0;                 /* allow children to shrink / scroll */
  padding:1.6rem 2rem 4rem;
}
.main-inner{max-width:820px;margin:0 auto}

/* ---------- Sidebar nav ---------- */
.sidebar-title{
  display:block;
  font:600 1.15rem/1.2 Georgia,serif;
  color:var(--ink);
  padding:0 1.1rem .3rem;
  margin-bottom:.2rem;
}
.sidebar-title:hover{text-decoration:none;color:var(--accent)}
.sidebar-title small{display:block;font:400 .72rem/1.3 inherit;color:var(--muted);letter-spacing:.02em;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}

.sidebar nav{margin-top:.6rem}
.sidebar .nav-group{margin:0 0 .55rem}
.sidebar .nav-group > h3{
  font:600 .72rem/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  margin:.7rem 0 .15rem;
  padding:0 1.1rem;
}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li a{
  display:block;
  color:var(--ink);
  padding:.27rem 1.1rem .27rem 1.1rem;
  border-left:3px solid transparent;
  line-height:1.3;
}
.sidebar li a:hover{background:var(--card);text-decoration:none;color:var(--accent)}
.sidebar li a[aria-current="page"]{
  color:var(--accent-dark);
  font-weight:600;
  background:#e9e0cd;
  border-left-color:var(--accent);
}

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.topbar{display:none}
.nav-backdrop{display:none}

/* ---------- Content typography ---------- */
.main h1,
.main .wiki-page-header__title{
  font:600 1.85rem/1.18 Georgia,serif;
  color:var(--ink);
  margin:.2rem 0 1rem;
}
.main h2{
  font:600 1.25rem/1.25 Georgia,serif;
  color:var(--ink);
  margin:1.8rem 0 .5rem;
  padding-bottom:.2rem;
  border-bottom:1px solid var(--line);
}
.main h3{font:600 1.05rem/1.3 Georgia,serif;margin:1.2rem 0 .35rem}
.main p{margin:.6rem 0}
.main ul,.main ol{margin:.6rem 0;padding-left:1.4rem}
.main li{margin:.32rem 0}

.main img{max-width:100%;height:auto}
.main figure{
  margin:1rem 0;
  background:var(--card);
  border:1px solid var(--line);
  padding:.5rem;
  display:inline-block;
  max-width:100%;
}
.main figure img{display:block}
.main figcaption{
  font-size:.86rem;color:var(--muted);
  margin-top:.4rem;max-width:320px;
}

/* Timeline entries: highlighted leading date */
.tl-date{font-weight:600;color:var(--accent-dark)}

/* Prev/next pager at the foot of timeline pages */
.pager{
  display:flex;justify-content:space-between;gap:1rem;
  margin:2.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.95rem;
}
.pager a{font-weight:600}

/* "At a glance" fact grid on the home page */
dl.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:.6rem;margin:1.1rem 0;
}
dl.facts > div{background:var(--card);border:1px solid var(--line);padding:.5rem .75rem}
dl.facts dt{
  font:600 .7rem/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
}
dl.facts dd{margin:.1rem 0 0;font-size:.93rem;line-height:1.4}

/* Image gallery (e.g. Pictures page) */
.gallery{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.1rem 0}
.gallery img{
  width:300px;max-width:100%;height:auto;
  border:1px solid var(--line);background:var(--card);padding:4px;
}
@media (max-width:520px){.gallery img{width:100%}}

/* Quoted source material that the original marks up with <i> */
.main i{color:#333}

/* Long fixed-width records (title / company searches) and tables:
   keep their formatting but let them scroll instead of breaking layout. */
.main pre{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1rem 1.1rem;
  overflow-x:auto;
  font-size:.82rem;
  line-height:1.45;
  white-space:pre;
}
.main table{border-collapse:collapse;margin:1rem 0;font-size:.9rem;max-width:100%}
.main td,.main th{border:1px solid var(--line);padding:.3rem .55rem;vertical-align:top;text-align:left}
.main th{background:var(--card)}

/* Intro block on the home page */
.intro{overflow:hidden;border-bottom:1px solid var(--line);padding-bottom:1.1rem;margin-bottom:1.4rem}
.intro img{
  float:right;width:230px;height:auto;
  margin:.2rem 0 .6rem 1.3rem;
  border:1px solid var(--line);background:var(--card);padding:4px;
}
.intro p{margin:.6rem 0}

/* Note / callout box (used on dated pages) */
.note{
  background:#fff7c2;border-left:4px solid #d8a000;
  padding:.6rem .9rem;margin:0 0 1.2rem;font-size:.95rem;
}
.dead-link{color:#a02020;font-size:.85em;white-space:nowrap}

/* Compact "explore" grid for the home page */
ul.dir{
  list-style:none;padding:0;margin:.4rem 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.3rem .7rem;
}
ul.dir li{margin:0;font-size:.96rem}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  html{font-size:16px}
  .topbar{
    display:flex;align-items:center;gap:.6rem;
    position:sticky;top:0;z-index:100;
    background:var(--sidebar-bg);
    border-bottom:1px solid var(--line);
    padding:.5rem .8rem;
  }
  .topbar .nav-toggle{
    font-size:1.3rem;line-height:1;
    background:none;border:1px solid var(--line);border-radius:5px;
    color:var(--ink);padding:.25rem .55rem;cursor:pointer;
  }
  .topbar-title{font:600 1.05rem/1.2 Georgia,serif;color:var(--ink)}

  .layout{display:block}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    height:100vh;width:84%;max-width:300px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:120;
    box-shadow:2px 0 12px rgba(0,0,0,.18);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .nav-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(0,0,0,.35);z-index:110;
  }
  /* the sidebar's own title duplicates the top bar on mobile */
  .sidebar .sidebar-title{display:none}
  .main{padding:1.2rem 1.1rem 3rem}
}

@media (max-width:520px){
  .intro img{float:none;display:block;width:100%;max-width:300px;margin:0 auto .9rem}
  .intro figcaption,.main figcaption{max-width:none}
}