/* Institutional Public Policy Press
   The palette and the hairline frame are taken from the printed covers, so the
   site and the object read as the same publisher. Navy ground, cream text,
   a short gold rule where the covers put one. */

:root {
  --navy:  #0C2340;
  --cream: #F4F1EA;
  --gold:  #C9A227;
  --pale:  #AFC3D8;
  --rule:  #5C7A9E;

  --serif: "Latin Modern Roman", "Iowan Old Style", "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

/* the frame: the same hairline inset that runs round the covers */
.frame {
  border: 1px solid var(--rule);
  border-color: rgba(92, 122, 158, 0.55);
  margin: clamp(14px, 3vw, 40px);
  padding: clamp(26px, 5vw, 74px) clamp(20px, 5vw, 74px) clamp(40px, 6vw, 88px);
  min-height: calc(100vh - clamp(28px, 6vw, 80px));
}

.column { max-width: 34em; }
.wide   { max-width: 46em; }

/* masthead */
.masthead { margin-bottom: clamp(40px, 7vw, 92px); }

.wordmark {
  display: block;
  color: var(--cream);
  text-decoration: none;
  font-size: clamp(1.45rem, 4.6vw, 2.7rem);
  letter-spacing: 0.13em;
  line-height: 1.28;
  text-transform: uppercase;
  font-weight: normal;
  margin: 0;
}
.wordmark span { display: block; }

.place {
  margin: 1.1em 0 0;
  color: var(--pale);
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gold-rule {
  width: 92px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: clamp(24px, 4vw, 40px) 0;
}

/* navigation */
nav { margin-top: clamp(26px, 4vw, 42px); }
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6em;
}
nav a {
  color: var(--pale);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
nav a:hover, nav a:focus-visible { color: var(--cream); border-bottom-color: var(--gold); }
nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--rule); }

/* headings and text */
h1 {
  font-weight: normal;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.3;
  margin: 0 0 0.9em;
}

h2 {
  font-weight: normal;
  font-size: 1.16rem;
  line-height: 1.45;
  color: var(--gold);
  margin: 2.6em 0 0.7em;
}

h3 {
  font-weight: normal;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--pale);
  margin: 2em 0 0.5em;
}

p { margin: 0 0 1.25em; }

.lede { font-size: 1.1rem; line-height: 1.68; }

.quiet { color: var(--pale); }

a { color: var(--cream); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration-color: var(--gold); }

ul.plain { padding-left: 1.15em; margin: 0 0 1.4em; }
ul.plain li { margin-bottom: 0.7em; }

/* catalogue */
.title-block { margin-bottom: 2.4em; }
.book-title { font-size: 1.45rem; line-height: 1.3; margin: 0 0 0.25em; }
.book-subtitle { color: var(--gold); font-style: italic; margin: 0 0 0.5em; }
.book-author { color: var(--pale); margin: 0; }

.editions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 34px);
  margin: 2.4em 0 3em;
  padding: 0;
  list-style: none;
}
.editions li { width: 168px; }
.editions img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(92, 122, 158, 0.4);
}
.editions figcaption, .editions .cap {
  color: var(--pale);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 0.7em;
}

dl.meta { margin: 2.4em 0 0; }
dl.meta div { display: flex; gap: 1em; padding: 0.55em 0; border-top: 1px solid rgba(92,122,158,0.28); }
dl.meta dt { color: var(--pale); flex: 0 0 9.5em; margin: 0; font-size: 0.94rem; }
dl.meta dd { margin: 0; font-size: 0.94rem; }

footer {
  margin-top: clamp(56px, 9vw, 110px);
  padding-top: 1.6em;
  border-top: 1px solid rgba(92, 122, 158, 0.34);
  color: var(--pale);
  font-size: 0.88rem;
}
footer p { margin: 0 0 0.4em; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .editions li { width: 132px; }
  dl.meta div { flex-direction: column; gap: 0.15em; }
  dl.meta dt { flex: none; }
}