/* =========================================================
   HTMAA — Unified Styles (Weeks + Homepage)
   - sticky rightbar (no box), shared variables
   - clean, paper-like body
   - gallery grid + frames
   - nicer headings, code, tables, figures
   - utilities for grids/callouts/floats
   =======================================================*/

/* ---------- Variables (unified) ---------- */
:root{
  /* Layout */
  --body-max: 73rem;      /* main text / content width */
  --toc-width: 20rem;     /* rightbar/TOC column width */
  --gutter: 5rem;         /* gap between content and rightbar/TOC */
  --toc-top: 2rem;        /* distance from top when fixed */

  /* Colors & type */
  --bg: #f2f2f2;
  --ink: #1a1a1a;
  --ink-strong: #222;
  --muted: #666;
  --paper: #fff;
  --rule: #e6e6e6;
  --accent: #111;

  /* Code blocks */
  --code-bg: #fff;
  --pre-bg: #fff;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.8;
  max-width: min(var(--body-max), 95vw);
  padding: 0 1rem;
  text-shadow: 0 1px 0 #ffffff; /* matches week pages */
  margin-left: auto; margin-right: auto;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { border-bottom: 0; }

/* Media */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

/* Headings */
h1, h2, h3 { margin: 1.2em 0 .55em; line-height: 1.3; color: var(--ink-strong); }
h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); scroll-margin-top: 5rem; }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.75rem); scroll-margin-top: 5rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.28rem); scroll-margin-top: 5rem; }

h3.subtitle{
  font-size: 1.05em;
  font-weight: normal;
  text-align: center;
  color: #555;
  margin-top: .5em;
  margin-bottom: 1em;
}

/* Highlight the heading jumped to */
:target { background: #fffef5; outline: 2px solid #eee; }

/* Lists */
ul, ol { padding-left: 1.15em; }

/* Code */
code { background: var(--code-bg); padding: 0 .25em; border-radius: 2px; }
pre { background: var(--pre-bg); padding: 1rem; border-radius: 4px; overflow: auto; border: 1px solid var(--rule); }
pre code { background: transparent; padding: 0; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .98rem; }
th, td { border: 1px solid var(--rule); padding: .55rem .6rem; vertical-align: top; }
th { background: #fafafa; text-align: left; }

/* Blockquotes */
blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 4px solid #bbb; background: #fff; }

/* Figures & captions */
figure { margin: 1.2rem auto; text-align: center; max-width: 300px; }
figcaption { font-size: .9rem; color: var(--muted); margin-top: .35rem; }

/* Image “glued-paper” drop shadow */
.shadow-img { filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)) drop-shadow(0 10px 14px rgba(0,0,0,.22)); }

/* =========================================================
   Rightbar / TOC (shared)
   - Use the same styling for homepage .rightbar and #TOC/.toc
   =======================================================*/

/* Common visual reset (no box) */
#TOC, .toc, .rightbar{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 1rem 0;
  color: var(--muted);
}

/* Title inside rightbar/TOC */
#TOC h2, #TOC h3, .toc h2, .toc h3, .rb-title{
  margin: 0 0 .5rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  opacity: .95;
}

/* Links inside */
#TOC a, .toc a { border-bottom: 0; color: inherit; }
#TOC a:hover, .toc a:hover, .rb-links a:hover { text-decoration: underline; }

/* Lists inside TOC */
#TOC ul, .toc ul { list-style: none; padding-left: 0; margin: 0; }
#TOC li, .toc li { margin: .3rem 0; }
#TOC ul ul, .toc ul ul { margin-left: 1rem; }

/* Rightbar-specific small structure */



.rb-section { margin-bottom: 1.2rem; }
.rb-links a { display:block; padding:.2rem 0; color:inherit; border-bottom:0; }
.rb-img {
  /* keep the portrait consistently small: ~10% viewport width, clamped */
  width: clamp(60px, 10vw, 120px);
  vertical-align: middle;
  margin-bottom: .5rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.2));
}

/* Little button */
.btn{ display:inline-block; padding:.45rem .7rem; border:1px solid var(--rule); background:var(--paper); font-weight:600; color: var(--ink); }
.btn:hover{ background:#fafafa }

/* --- Layout rules for fixed rightbar/TOC --- */
@media (min-width: 900px){
  /* Reserve space on the right for the fixed column */
  body > :not(#TOC):not(.toc):not(.rightbar){
    margin-right: calc(var(--toc-width) + var(--gutter));
  }

  /* Fix to the right edge */
  #TOC, .toc, .rightbar{
    position: fixed;
    top: var(--toc-top);
    right: 1rem;
    width: var(--toc-width);
    max-height: calc(100vh - (var(--toc-top) + 2rem));
    overflow: auto;
    font-size: 14px;
    line-height: 1.4;
  }
}

@media (max-width: 899.98px){
  #TOC, .toc, .rightbar{ position: static; width: auto; max-height: none; padding: 0 1rem 2rem; }
  body > :not(#TOC):not(.toc):not(.rightbar){ margin-right:0; }
}

/* Optional small link at bottom of TOC */
.toc-back { display:block; margin-top:.75rem; font-size:.92em; }

/* =========================================================
   Homepage: header + gallery wall
   =======================================================*/

/* Header */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(12px,2.4vw,28px) 1rem;
  max-width: min(var(--body-max), 95vw);
  margin: 0 auto;
}
header h1{ margin:0; font-weight:400; letter-spacing:.02em; font-size:clamp(20px,4vw,40px); }
header nav a{ margin-left:1rem; font-weight:600; }

/* Main container for gallery pages */
main{
  max-width: min(var(--body-max), 95vw);
  margin: 0 auto 7vh;
}

/* Gallery wall grid */
.wall{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
  padding: 0 1rem 6vh;
}

/* Frames */
.frame{
  display: block;
  border-radius: 4px;
  overflow: hidden;
  text-align: center;
  transition: all .25s ease;
  background: transparent;
  box-shadow: none;
}
.frame:hover{
  background: var(--paper);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-4px);
}
.frame img{ width:100%; height:auto; display:block; }

.caption{
  display:block;
  padding:.5rem;
  font-size:.9rem;
  color: var(--ink);
}

/* Mobile tweak for the “hero” group if used */
@media (max-width:760px){
  .wall{ grid-template-columns: repeat(6,1fr); grid-auto-rows:20vw; }
  .hero{ grid-column:2 / span 4; grid-row:auto / span 4; }
  .spot-a,.spot-b,.spot-c,.spot-d,.spot-e,.spot-f,.spot-g{ grid-column: span 3; grid-row: span 3; }
}

/* Entrance animation helper */
.fade{ opacity:0; transform:translateY(8px); }

/* =========================================================
   “Clicked from homepage” hero (weeks)
   =======================================================*/
#clicked-image-wrap { display:none; margin: 1rem 0 1.5rem; }
#clicked-image { max-width: 300px; height:auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)); }

/* =========================================================
   Callouts / Utilities
   =======================================================*/
.callout { border: 1px solid var(--rule); background:#fff; padding: .9rem 1rem; margin: 1rem 0; }
.callout.note  { border-left: 4px solid #5a7; }
.callout.tip   { border-left: 4px solid #2a7; }
.callout.warn  { border-left: 4px solid #d64; background: #fff7f5; }

.float-r { float: right; margin: .2rem 0 .8rem 1rem; max-width: 45%; }
.float-l { float: left;  margin: .2rem 1rem .8rem 0;  max-width: 45%; }
.clearfix::after { content:""; display:block; clear:both; }

.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 720px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Footnotes tidy */
sup[id^="fnref"], a[href^="#fn" ] { text-decoration:none; border-bottom:0; }
.footnotes { font-size: .95rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .5rem; }

/* =========================================================
   Footer
   =======================================================*/
.site-footer{
  margin-top: 4rem;
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.site-footer p{ margin:0; font-style: italic; }

/* =========================================================
   Print
   =======================================================*/
@media print{
  body { background: #fff; text-shadow: none; color:#000; }
  #TOC, .toc, .rightbar { position: static !important; width: auto !important; max-height: none !important; }
  body > :not(#TOC):not(.toc):not(.rightbar) { margin-right: 0 !important; }
  a { border-bottom: 0; color:#000; }
  .float-l, .float-r { float:none; margin: .5rem 0; max-width: 100%; }
}