/* ════════════════════════════════════════════════════════════════════
   Michael-Paul Hart — buyer profile

   Open, generous layout: large headings, wide margins, soft rounded
   plates that carry one figure each. Type matches michaelpaulhart.com
   (Avenir Heavy headings, DIN Next body) via Mulish and Barlow.

   No photography beyond the real headshot, no invented figures, no
   badges — everything on the page is something Michael can stand behind.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --paper:        #ffffff;
  --paper-sunk:   #f2f8f5;
  --plate:        #ffffff;
  --ink:          #0f1a20;
  --body:         #3c4a53;
  --muted:        #5f6e75;
  --rule:         #e2e9e7;
  --rule-soft:    #edf2f0;
  --accent:       #1f4b45;
  --accent-lift:  #2d7266;
  --accent-deep:  #133a34;
  --accent-wash:  #e8f2ee;
  --flag:         #b03a2e;

  /* Gradients — soft washes in the accent's own family, never a
     purple/blue SaaS ramp. */
  --grad-page:   linear-gradient(180deg, #e6f2ed 0%, rgba(230, 242, 237, 0) 100%);
  --grad-band:   linear-gradient(180deg, #ffffff 0%, #ecf6f2 20%,
                                 #ecf6f2 74%, #ffffff 100%);
  --grad-accent: linear-gradient(135deg, #2b6d61 0%, #17423c 100%);
  --grad-plate:  linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
  --grad-wash:   linear-gradient(135deg, #e6f1ed 0%, #f3f9f7 100%);

  --font-display: "Mulish", "Avenir Next", "Avenir", system-ui, sans-serif;
  --font-text:    "Barlow", "DIN Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:      "Barlow", "DIN Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-body:   1.0625rem;
  --fs-lede:   clamp(1.17rem, 1.06rem + 0.52vw, 1.42rem);
  --fs-h1:     clamp(2.3rem, 1.6rem + 2.85vw, 3.3rem);
  --fs-h2:     clamp(1.7rem, 1.4rem + 1.35vw, 2.35rem);
  --fs-h3:     clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --fs-figure: clamp(1.5rem, 1.25rem + 1.05vw, 2rem);

  --lh-body: 1.56;

  --wrap:    1100px;
  --prose:   36rem;
  --gutter:  clamp(1.35rem, 5vw, 3rem);
  --sect:    clamp(2.75rem, 5vw, 4.25rem);

  --radius:      16px;
  --radius-sm:   10px;
  --shadow-sm: 0 1px 2px rgba(15, 26, 32, 0.05),
               0 4px 10px -4px rgba(15, 26, 32, 0.08);
  --shadow: 0 2px 4px rgba(15, 26, 32, 0.045),
            0 14px 30px -12px rgba(15, 26, 32, 0.16);
  --shadow-lift: 0 4px 8px rgba(15, 26, 32, 0.05),
                 0 28px 56px -22px rgba(15, 26, 32, 0.24);
  --shadow-accent: 0 2px 6px rgba(23, 66, 60, 0.22),
                   0 14px 28px -12px rgba(23, 66, 60, 0.5);
  --shadow-hover: 0 6px 12px rgba(15, 26, 32, 0.06),
                  0 30px 60px -20px rgba(15, 26, 32, 0.26);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grad-page);
  background-repeat: no-repeat;
  background-size: 100% 760px;
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--accent-wash); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sep { color: #a9b8b3; padding: 0 0.25em; }

/* ── Type ────────────────────────────────────────────────────────── */
h1, h2, h3 { color: var(--ink); margin: 0; }

h1, h2 { font-family: var(--font-display); font-weight: 800; }

h1 {
  font-size: var(--fs-h1);
  line-height: 0.99;
  letter-spacing: -0.03em;
  margin: 0.4rem 0 1.1rem;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
  max-width: 20ch;
}

h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.95rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.38;
  color: var(--ink);
  margin-bottom: 1.15rem;
}

.fine {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 1.15rem;
  max-width: var(--prose);
}

.note-inline {
  margin: 1.75rem 0 0;
  max-width: var(--prose);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--body);
}
.note-inline::before {
  content: "";
  display: block;
  width: 2.75rem;
  border-top: 3px solid var(--accent);
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }
main a, .footer a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Pill label above every section heading */
.eyebrow {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: var(--plate);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

/* ── Masthead ────────────────────────────────────────────────────── */
.masthead {
  border-top: 4px solid var(--accent);
  padding: 1.1rem 0 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 2rem;
}
.masthead__name a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
/* Direct child only — otherwise this also blockifies the nested .sep. */
.masthead__name > span {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}
.masthead__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem clamp(1.1rem, 2.6vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.masthead__nav a {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--body);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.72rem 0.72rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease,
              border-color 0.16s ease, transform 0.16s ease;
}
.btn__arrow {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  flex: none;
  transition: transform 0.16s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid {
  background-image: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--solid .btn__arrow { background: rgba(255, 255, 255, 0.18); }
.btn--solid:hover,
.btn--solid:focus-visible {
  background-image: linear-gradient(135deg, #22594f 0%, #102f2a 100%);
  color: #fff;
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--plate);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow);
}
.btn--ghost .btn__arrow { background: var(--accent-wash); color: var(--accent); }
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* ── Sections ────────────────────────────────────────────────────── */
.section { padding: var(--sect) 0; }
.section--band { background-image: var(--grad-band); }
.section__body > p,
.section__body > .lede { max-width: var(--prose); }

/* ── Opening ─────────────────────────────────────────────────────── */
.opening { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.opening__grid { display: block; }
.opening__text { max-width: 36rem; }

.portrait { margin: 0 0 1.5rem; width: 150px; }
/* On a phone the caption just repeats the <h1> directly beneath it. */
.portrait figcaption { display: none; }
.portrait__plate {
  background-image: var(--grad-plate);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 8px;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 10px;
}
.portrait figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cards--key { margin-top: clamp(1.9rem, 4vw, 2.75rem); }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.05rem 1.15rem 1.15rem;
  background: var(--plate);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  break-inside: avoid;
}

.card__label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

/* The figure is the point of the card. */
.card__figure {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-figure);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
}

/* The four headline plates carry the most weight on the page. Two-up even
   on a phone: four stacked plates was most of a screen on its own. */
.cards--key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--key .card {
  background-image: var(--grad-plate);
  box-shadow: var(--shadow-lift);
}

/* They are narrower than the criteria plates, so their figures are
   sized to stay on one line. */
.cards--key .card__figure { font-size: clamp(1.15rem, 0.8rem + 1.35vw, 1.9rem); }

.card__note {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--muted);
}

.card__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--body);
}

/* One criterion matters more than the rest, so it gets its own plate. */
.card--feature {
  gap: 0.4rem;
  padding: clamp(1.2rem, 2.4vw, 1.6rem);
  margin-bottom: 0.7rem;
  border-color: var(--rule);
  background-image: var(--grad-plate);
  box-shadow: var(--shadow-lift);
}
.card--feature .card__figure { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem); }
.card--feature .card__note { max-width: 52ch; font-size: 0.96rem; }

/* Chips — a flowing row of pills. Sectors, counties and exclusions were
   full-width one-line cards, which cost five or six rows each; as chips
   they wrap into two or three and read faster. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  padding: 0.48rem 0.92rem;
  border-radius: 999px;
  background-image: var(--grad-plate);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--body);
}
.chip--muted {
  background: none;
  background-color: transparent;
  border-color: var(--rule);
  box-shadow: none;
  color: var(--muted);
}

/* Single-line name plates — sectors, counties. */
.cards--tight { gap: 0.6rem; }
.cards--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card--tag {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--body);
}

/* Exclusions: recessed rather than presented. */
.card--muted {
  padding: 0.95rem 1.15rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--rule);
  box-shadow: none;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--muted);
}

.card__link {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  word-break: break-word;
}

/* ── Letter to the seller ────────────────────────────────────────── */
.letter {
  max-width: 42rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background-image: var(--grad-plate);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.letter__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* The headshot is a full square with a lot of air around the subject, so
   the avatar crops in on the face rather than object-fit'ing a square
   into a square (which would do nothing). */
.letter__avatar {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--accent-wash);
}
.letter__avatar img {
  width: 250%;
  height: 250%;
  max-width: none;
  margin: -5% 0 0 -70%;
}
.letter__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.letter__meta {
  margin: 0.2rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.letter p { max-width: 58ch; }
.letter__sign {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
}
.letter__sign > span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ── Marginal annotation ─────────────────────────────────────────── */
.marginal {
  max-width: var(--prose);
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background-image: var(--grad-wash);
  border: 1px solid #dceae5;
  border-radius: var(--radius-sm);
}
.marginal__label {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.marginal p { font-size: 1.02rem; line-height: 1.5; color: var(--body); }

/* ── Developer placeholders ──────────────────────────────────────── */
.link-todo {
  color: var(--flag);
  border-bottom: 1px dashed var(--flag);
}
.is-placeholder {
  color: var(--flag) !important;
  outline: 1px dashed var(--flag);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Form ────────────────────────────────────────────────────────── */
.form { margin-top: 1.5rem; max-width: 44rem; }
.form__grid { display: grid; gap: 0 1.35rem; }
.field { display: block; margin: 0 0 1.15rem; }
.field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.field__opt { text-transform: none; letter-spacing: 0.01em; font-weight: 400; }

.form input,
.form textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}
.form textarea { resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible { border-color: var(--accent); }
.form input::placeholder { color: #a39a8a; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.35rem;
  margin: 0.6rem 0 0;
}
.form__status { font-family: var(--font-ui); font-size: 0.92rem; color: var(--muted); }
.form__status[data-state="ok"]    { color: var(--accent); }
.form__status[data-state="error"] { color: var(--flag); }
.form button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule-soft);
  padding: 1.9rem 0 2.5rem;
}
.footer__name {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer__note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--muted);
}

/* ════════════════ Hover ══════════════════════════════════════════
   Guarded by (hover: hover) so a phone never sticks in a hover state
   after a tap. Every transform here is cancelled again under
   prefers-reduced-motion below.
   ════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  .chip {
    transition: transform 0.2s var(--ease), box-shadow 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
  }
  .chip:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow);
    border-color: #cfe1da;
    color: var(--ink);
  }
  .chip--muted:hover {
    background-image: var(--grad-plate);
    box-shadow: var(--shadow-sm);
    color: var(--body);
  }

  .card {
    transition: transform 0.22s var(--ease), box-shadow 0.22s ease,
                border-color 0.22s ease;
  }
  .card:hover,
  .card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: #dbe7e3;
  }
  .card--muted:hover { background-image: var(--grad-plate); }

  .letter,
  .portrait__plate {
    transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
  }
  .letter:hover,
  .portrait:hover .portrait__plate {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }

  .eyebrow { transition: transform 0.2s var(--ease), box-shadow 0.2s ease; }
  .eyebrow:hover { transform: scale(1.04); box-shadow: var(--shadow); }
}

/* ════════════════ Wider viewports ════════════════════════════════ */
@media (min-width: 620px) {
  .masthead__name > span { white-space: nowrap; }

  .portrait figcaption { display: block; }

  .form__grid { grid-template-columns: 1fr 1fr; }
  .portrait { width: 225px; }
  .cards--2,
  .cards--3,
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .opening__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
  }
  .opening__text { grid-column: 1; grid-row: 1; }
  .portrait {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0.5rem 0 0;
  }

  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  h2 { max-width: 16ch; }
}

/* ════════════════ Preferences ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* Keep the depth cue on hover, drop the movement. */
  .chip:hover, .card:hover, .card:focus-within, .letter:hover,
  .eyebrow:hover, .btn:hover, .portrait:hover .portrait__plate,
  .btn:hover .btn__arrow { transform: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --body: #17222a;
    --muted: #3f4d55;
    --rule: #9fb2ad;
    --rule-soft: #b6c6c1;
    --grad-page: none;
    --grad-band: none;
    --grad-plate: none;
    --grad-wash: none;
  }
}

/* ════════════════ Print ══════════════════════════════════════════ */
@media print {
  :root {
    --paper: #fff; --paper-sunk: #fff; --accent-wash: #fff;
    --grad-page: none; --grad-band: none;
    --grad-plate: none; --grad-wash: none; --grad-accent: none;
  }
  body { background-image: none; }
  body { font-size: 10.5pt; line-height: 1.45; color: #000; }
  .masthead__nav, .actions, #form-shell, .skip-link { display: none !important; }
  .section { padding: 1.2rem 0; }
  .section--band { background: none; }
  h2 { break-after: avoid; }
  .chip { border: 1px solid #bbb; box-shadow: none; background: none; }
  .card, .letter, .marginal {
    background: none;
    box-shadow: none;
    border: 1px solid #bbb;
    break-inside: avoid;
  }
  main a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    word-break: break-all;
  }
  .portrait { width: 150px; }
}