:root{
  --bg: #eef0ee;              /* cool, pale plaster */
  --ink: #1f2426;             /* cool graphite */
  --muted: rgba(31,36,38,.62);
  --hair: rgba(31,36,38,.14);

  --rust: #9b4e3d;            /* muted rust */
  --rust-dim: rgba(155,78,61,.78);

  --sig: rgba(31,36,38,.42);  /* very pale gray for signature */
  --sig-hover: rgba(31,36,38,.58);

  --col: 760px;
  --gutter: clamp(18px, 5vw, 56px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: "Source Serif 4", ui-serif, "Iowan Old Style", Palatino, serif;
}

.wrap{
  width: min(var(--col), calc(100% - 2*var(--gutter)));
  margin: 0 auto;
  padding: clamp(18px, 5vh, 58px) 0;
  position: relative;
}

/* architectural spine */
.wrap::before{
  content:"";
  position: absolute;
  left: -10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair);
}

.mast{
  padding: 18px 0 18px 0;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 18px;
}

.title{
  margin: 0;
  font-size: clamp(2.05rem, 4.6vw, 3.05rem);
  line-height: 1.06;
}

.authors{
  margin: 10px 0 0 0;
  font-size: 1.02rem;
  color: var(--muted);
}

a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover{
  text-decoration-thickness: 2px;
}

/* images */
.art{ margin: 0; }

.art img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.art-top{ margin-bottom: 18px; }
.art-hinge{ margin: 22px 0 24px 0; }

/* dialogue */
.dialogue{
  font-size: clamp(1.08rem, 2.0vw, 1.23rem);
  line-height: 1.62;
  padding-top: 10px;
}

.turn{
  margin: 0 0 14px 0;
  max-width: 72ch;
}

.who{
  display: inline-block;
  min-width: 2.4em;
  margin-right: .35em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--rust-dim);
}

/* footer + signature */
.foot{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}

.signature{
  margin: 0;
  text-align: right;          /* flush right with column */
}

.signature-link{
  color: var(--sig);
  text-decoration: none;      /* no underline */
  letter-spacing: .075em;     /* subtle spacing */
  font-size: 0.98rem;
}

.signature-link:hover{
  color: var(--sig-hover);
}

/* mobile tweaks */
@media (max-width: 420px){
  .wrap::before{ left: -6px; }
  .turn{ margin-bottom: 16px; }
  .who{ min-width: 2.1em; }
}