/* meltonio.com — broadsheet edition. Fonts self-hosted (SIL OFL): Jost, Playfair Display, Libre Caslon Text. */
@font-face { font-family: "Jost"; src: url("fonts/Jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/LibreCaslonText-Regular.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/LibreCaslonText-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --paper: #f3efe6;
  --ink: #141311;
  --mute: #4a4740;
  --mast: "Jost", Futura, "Futura PT", "Century Gothic", sans-serif;
  --head: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --body: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --pad: clamp(16px, 4vw, 56px);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .17  0 0 0 0 .12  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>"),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), rgba(0,0,0,0) 60%),
    radial-gradient(ellipse at 50% 100%, rgba(120,100,60,.06), rgba(0,0,0,0) 70%);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }

.sheet {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 40px) var(--pad) 36px;
}

/* ---------- Masthead ---------- */
.ears {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  padding-bottom: 10px;
}
.ear {
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 20em;
}
.ear-l { justify-self: start; border: 1px solid var(--ink); padding: 7px 10px; }
.ear-r { justify-self: end; text-align: right; border: 1px solid var(--ink); padding: 7px 10px; }
.motto { font-family: var(--head); font-size: 14px; text-align: center; align-self: center; }

.name {
  margin: 0;
  padding: 12px 0 6px;
  border-top: 5px solid var(--ink);
  box-shadow: 0 -8px 0 -6px var(--paper), 0 -9px 0 -6px var(--ink);
  font-family: var(--mast);
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(40px, 11.6vw, 156px);
  line-height: .95;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* double rules: thick-over-thin above, thin-over-thick below the dateline */
.masthead { position: relative; }
.masthead .name { border-top: 0; box-shadow: none; }
.masthead .ears { border-bottom: 1px solid var(--ink); }
.masthead .name::before { content: ""; display: block; height: 4px; background: var(--ink); margin: 3px 0 clamp(10px, 1.6vw, 18px); }

.dateline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 2px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 4px 0 0 var(--paper), 0 7px 0 0 var(--ink);
  margin-bottom: 7px;
  font-family: var(--body);
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 15px;
  letter-spacing: .14em;
  line-height: 1.2;
}

/* ---------- Headline ---------- */
.story { padding-top: clamp(22px, 3vw, 38px); }
.headline { text-align: center; margin-bottom: clamp(16px, 2.4vw, 26px); }
.headline h2 {
  margin: 0;
  font-family: var(--head);
  font-weight: 900;
  font-stretch: condensed;
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: .98;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.deck {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 4px 0;
  border-top: 1px solid var(--ink);
  font-family: var(--head);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.2;
}

/* ---------- Photo ---------- */
.lead { margin: 0 0 clamp(20px, 2.6vw, 30px); }
.lead img {
  width: 100%;
  border: 1px solid var(--ink);
  filter: grayscale(1) contrast(1.04);
}
.lead figcaption {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding-top: 7px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
}
.lead figcaption em { font-size: 14px; }
.credit {
  align-self: flex-end;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- Body copy ---------- */
.bio {
  column-count: 2;
  column-gap: 34px;
  column-rule: 1px solid var(--ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-size: 15.5px;
  line-height: 1.55;
}
.bio p { text-indent: 1.4em; margin: 0; orphans: 3; widows: 3; }
.bio p.first { text-indent: 0; }
.bio p.first::first-letter {
  float: left;
  font-family: var(--head);
  font-weight: 900;
  font-size: 4.3em;
  line-height: .78;
  padding: .06em .08em 0 0;
}
.bio a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.bio .kicker { text-indent: 0; text-align: center; margin-top: .9em; break-inside: avoid; }
.bio .kicker::before { content: "\2014\2003\2014\2003\2014"; display: block; font-size: 11px; margin-bottom: .6em; letter-spacing: .1em; }

/* ---------- Notice ---------- */
.notice {
  margin: clamp(30px, 4vw, 48px) auto 0;
  max-width: 560px;
  padding: 14px 22px 16px;
  border: 3px double var(--ink);
  text-align: center;
}
.notice-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mast);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.exhibit-note {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.3;
}

/* ---------- Classified contact ---------- */
.contact { margin-top: clamp(28px, 3.6vw, 40px); text-align: center; }
.classified {
  display: inline-block;
  min-width: 260px;
  padding: 12px 22px 10px;
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}
.email { font-size: 15px; letter-spacing: .04em; }
.email a { text-decoration: none; }
.email a:hover, .email a:focus-visible { text-decoration: underline; }
.ig-row { margin-top: 6px; display: flex; justify-content: center; }
.ig { display: inline-flex; color: var(--ink); }
.ig:hover { opacity: .6; }

/* ---------- Footer ---------- */
.foot {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--paper), inset 0 4px 0 0 var(--ink);
  text-align: center;
}
.foot p { padding-top: 6px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bio { column-count: 2; }
}
@media (max-width: 760px) {
  .ears { grid-template-columns: 1fr 1fr; gap: 10px; }
  .motto { grid-column: 1 / -1; grid-row: 1; }
  .ear { font-size: 9.5px; padding: 5px 7px; }
  .dateline { flex-wrap: wrap; justify-content: center; font-size: 12px; letter-spacing: .1em; gap: 2px 14px; text-align: center; }
  .dl-mid { order: -1; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .bio { column-count: 1; font-size: 16px; }
  .name { letter-spacing: .02em; }
}

/* refinements */
.dateline, .foot p { font-variant-numeric: lining-nums; }
.ears { align-items: stretch; }
.ear { width: 27em; max-width: 100%; display: flex; align-items: center; }
.ear-r { justify-content: flex-end; }
.bio p.first::first-letter { font-size: 3.55em; line-height: .82; padding: .04em .03em 0 0; margin-top: .02em; }
@media (max-width: 760px) { .ear { width: auto; } }