/* rezaramji.com — plain EB Garamond, one hash-routed page */

:root { --ink: #1c1b19; --muted: #6b6760; --accent: #7a2424; }

body {
  margin: 0 auto;
  max-width: 700px;
  padding: 1.3rem 1.25rem 3rem;
  font-family: 'EB Garamond', Garamond, Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header: name left, nav right, with a divider line beneath */
header.site { border-bottom: 1px solid rgba(0,0,0,.12); margin-bottom: 1.6rem; }
header.site .bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.1rem; padding-bottom: .85rem; }
.brand { font-weight: 600; color: var(--ink); }
nav.top { display: inline-flex; flex-wrap: wrap; gap: 1.1rem; }
nav.top a { color: var(--muted); }
nav.top a.active { color: var(--ink); }

h1 { font-size: 1.55rem; font-weight: 600; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.2rem 0 .2rem; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.portrait { max-width: 260px; width: 100%; height: auto; margin: .5rem 0; }

/* project tabs sit in the Projects header row: heading left, tabs right */
.proj-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.1rem; margin-bottom: 1.2rem; }
.proj-head h1 { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; }
.tab { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); font-weight: 600; }
.tabbed .panel:not(.active) { display: none; }
.proj { margin: 0 0 1rem; }
.proj-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .8rem; }
.proj h3 { font-size: 1.02rem; font-weight: 600; margin: 0; }
.proj p { margin: .12rem 0 0; }
.src { color: var(--muted); }

/* see also */
ul.links { list-style: none; padding: 0; margin: .6rem 0; }
ul.links li { margin: .25rem 0; }
.coin { width: 75px; height: auto; margin-top: .5rem; }