/* Oakum Chartered
   ------------------------------------------------------------------
   OAKUM, n. Loose fibre picked from old tarred rope, driven into a
   ship's plank seams with mallet and caulking iron and payed with hot
   pitch to keep her watertight. Old English acumba, "off-combings".

   The room this is meant to feel like: a shipping house with its own
   staircase and a brass plate by the door. Engraved stationery on laid
   paper, gilt hairlines, generous margins, nothing raised in volume.
   The rustic comes from the paper and the rope, not from decoration.

   Palette
     --indigo  #1C1550  from the logo
     --brown   #603813  from the logo
     --gilt    #A98235  engraved hairlines and ornaments
     --tan     #C49A66  the brown lightened, for the dark bands
     --vellum  #E9E0CE  laid paper
     --walnut  #241A12  the darkest line on the page
     --ink     #2E2419  warm ink, never black
   ------------------------------------------------------------------ */

:root {
  --indigo: #1C1550;
  --indigo-dk: #150F3C;
  --brown: #603813;
  --brown-dk: #46280D;
  --gilt: #A98235;
  --tan: #C49A66;
  --vellum: #E9E0CE;
  --vellum-dk: #DDD1B8;
  --walnut: #241A12;
  --ink: #2E2419;
  --ink-soft: #6B5C49;
  --rule: rgba(46, 36, 25, .3);
  --rule-faint: rgba(46, 36, 25, .15);
  --rule-light: rgba(233, 224, 206, .26);

  --measure: 62ch;
  --gutter: clamp(1.4rem, 5vw, 4rem);
  --band: clamp(3.75rem, 8vw, 7rem);
  --wrap: 1060px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* laid paper: close horizontal wire lines, wider chain lines, a little tooth */
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--vellum);
  background-image:
    repeating-linear-gradient(0deg, rgba(46, 36, 25, .028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(46, 36, 25, .04) 0 1px, transparent 1px 30px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)' opacity='.045'/%3E%3C/svg%3E");
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.08rem, 1rem + .34vw, 1.24rem);
  line-height: 1.66;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  color: var(--indigo);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.3rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.85rem, 1.35rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.28rem, 1.14rem + .62vw, 1.55rem); font-weight: 500; }

p, ul, ol { margin: 0 0 1.15em; }
p { max-width: var(--measure); }

a { color: var(--brown); text-underline-offset: .18em; text-decoration-thickness: .5px; }
a:hover { color: var(--indigo); }

img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 4px; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - (var(--gutter) * 2), 660px); margin-inline: auto; }

.skip { position: absolute; left: -9999px; background: var(--indigo); color: var(--vellum); padding: .7rem 1rem; }
.skip:focus { left: 0; top: 0; z-index: 50; }

/* small caps, set the way an engraver would: spaced, quiet, never shouted */
.label {
  display: block;
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: .13em;
  color: var(--brown);
  margin-bottom: .45rem;
}

/* ---------- rules and ornaments -------------------------------------
   .rope     a laid three-strand rope, used twice on a page at most
   .rule-orn an engraved double rule parted by a small lozenge
   .seam     a caulked plank seam, kept for one divider only
   ------------------------------------------------------------------ */

.rope {
  height: 13px;
  background-repeat: repeat-x;
  background-size: 26px 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='13' viewBox='0 0 26 13'%3E%3Cg fill='none' stroke='%23A98235' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 11 C4.5 11 5.5 2 10 2 C14.5 2 15.5 11 20 11 C24.5 11 25.5 2 30 2'/%3E%3Cpath d='M-6 11 C-1.5 11 -0.5 2 4 2 C8.5 2 9.5 11 14 11 C18.5 11 19.5 2 24 2'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .8;
}
.rope-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='13' viewBox='0 0 26 13'%3E%3Cg fill='none' stroke='%23C49A66' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 11 C4.5 11 5.5 2 10 2 C14.5 2 15.5 11 20 11 C24.5 11 25.5 2 30 2'/%3E%3Cpath d='M-6 11 C-1.5 11 -0.5 2 4 2 C8.5 2 9.5 11 14 11 C18.5 11 19.5 2 24 2'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .55;
}

.rule-orn {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 460px;
  margin: 0 auto;
  color: var(--gilt);
}
.rule-orn::before, .rule-orn::after {
  content: "";
  flex: 1;
  height: 3px;
  border-top: 1px solid var(--gilt);
  border-bottom: 1px solid rgba(169, 130, 53, .45);
}
.rule-orn img { width: 112px; height: auto; opacity: .9; border: 0; outline: 0; filter: none; }

.seam {
  height: 15px;
  border-top: 1px solid var(--walnut);
  border-bottom: 1px solid var(--walnut);
  background-color: var(--vellum-dk);
  background-image: repeating-linear-gradient(64deg, rgba(96, 56, 19, .8) 0 1px, transparent 1px 7px);
}

/* ---------- buttons: an engraved plate, not a poster ---------- */

.btn {
  display: inline-block;
  font-family: "EB Garamond", serif;
  font-variant: small-caps;
  font-size: 1.12rem;
  letter-spacing: .1em;
  padding: .62rem 1.7rem;
  border: 1px solid var(--indigo);
  outline: 1px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 0;
  background: var(--indigo);
  color: var(--vellum);
  text-decoration: none;
}
.btn:hover { background: var(--indigo-dk); color: #FBF6EC; }

.btn-quiet { background: transparent; color: var(--brown); border-color: var(--brown); outline-color: rgba(96, 56, 19, .45); }
.btn-quiet:hover { background: rgba(96, 56, 19, .08); color: var(--brown-dk); }

.btn-onindigo { background: transparent; color: var(--vellum); border-color: var(--tan); outline-color: rgba(196, 154, 102, .5); }
.btn-onindigo:hover { background: rgba(196, 154, 102, .14); color: #FBF6EC; }

/* ---------- masthead: the brass plate by the door ---------- */

.masthead { background: var(--vellum); border-bottom: 1px solid var(--rule); }
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 104px;
  padding-block: 1.1rem;
}
.brand { margin-right: auto; display: block; }
.brand img { height: 58px; width: auto; }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  font-variant: small-caps;
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .1rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brown); border-bottom-color: var(--gilt); }
.nav .tel { color: var(--brown); }

/* the nav link colour is more specific than .btn, which left the booking
   button reading indigo on indigo. Say it plainly here. */
.nav a.btn { color: var(--vellum); border-bottom-color: var(--indigo); }
.nav a.btn:hover { color: #FBF6EC; background: var(--indigo-dk); border-bottom-color: var(--indigo-dk); }

@media (max-width: 900px) {
  .masthead .wrap { flex-wrap: wrap; gap: .6rem 1.4rem; min-height: 0; }
  .brand { margin-right: 0; width: 100%; }
  .brand img { height: 46px; }
  .nav { flex-wrap: wrap; gap: .5rem 1.4rem; padding-bottom: .6rem; }
}

/* ---------- the title page ---------- */

/* the hero: the harbour engraving behind, with the paper washed back over the
   middle of it so the type keeps its contrast */
.titlepage {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 7vw, 5.5rem);
}
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  border: 0;
  outline: 0;
  filter: none;
  pointer-events: none;
}
.titlepage .scene { opacity: .34; z-index: 0; }
.titlepage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 42%,
              rgba(233, 224, 206, .95) 0%,
              rgba(233, 224, 206, .72) 46%,
              rgba(233, 224, 206, 0) 100%);
  z-index: 1;
}
.titlepage > .wrap { position: relative; z-index: 2; }
.titlepage .device { width: 92px; height: auto; margin: 0 auto 1.9rem; opacity: .95; }
.titlepage .dateline {
  font-variant: small-caps;
  letter-spacing: .22em;
  font-size: .98rem;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
  max-width: none;
}
.titlepage h1 { margin: 1.5rem 0 1rem; }
.titlepage .standfirst {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.24rem, 1.1rem + .7vw, 1.6rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 32ch;
  margin: 0 auto 2.4rem;
}
.titlepage .actions { display: flex; flex-wrap: wrap; gap: 1.3rem 1.6rem; justify-content: center; }

/* the definition: the whole reason the page looks like this */
.definition {
  max-width: 600px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 2rem 2.2rem 1.8rem;
  border: 1px solid var(--gilt);
  outline: 1px solid rgba(169, 130, 53, .4);
  outline-offset: 5px;
  background: rgba(221, 209, 184, .38);
  text-align: left;
}
.definition p { max-width: none; margin: 0; }
.definition .headword {
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  font-size: 1.5rem;
  letter-spacing: .1em;
  color: var(--indigo);
}
.definition .pos { font-style: italic; color: var(--ink-soft); }
.definition .gloss { margin-top: .7rem; }
.definition .etym { margin-top: 1rem; font-size: .97rem; font-style: italic; color: var(--ink-soft); }

/* ---------- bands ---------- */

.band { padding-block: var(--band); }
.band-tint { background: var(--vellum-dk); }
.band-indigo { background: var(--indigo); color: rgba(233, 224, 206, .86); }
.band-indigo h2, .band-indigo h3 { color: #F3EBDA; }
.band-indigo a { color: var(--tan); }
.band-indigo a:hover { color: #F3EBDA; }
.band-indigo .label { color: var(--tan); }

/* section heads are centred and ornamented; the prose under them is not */
.band-head { text-align: center; max-width: 46ch; margin: 0 auto 3rem; }
.band-head h2 { margin-bottom: .5rem; }
.band-head p { color: var(--ink-soft); margin: 1rem auto 0; }
.band-indigo .band-head p { color: rgba(233, 224, 206, .76); }

/* ---------- the caulker's sequence ---------- */

.caulking { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.8rem 3rem; }
.step { border-top: 1px solid var(--gilt); padding-top: 1.3rem; }
.step h3 { margin-bottom: .45em; }
.step p { margin-bottom: 0; }

/* ---------- pictures, framed as plates ---------- */

figure { margin: 0; }
figure img {
  border: 1px solid var(--walnut);
  outline: 1px solid rgba(169, 130, 53, .5);
  outline-offset: 5px;
  filter: sepia(.34) contrast(1.03) saturate(.72);
}
figcaption {
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: .09em;
  color: var(--ink-soft);
  margin-top: 1.1rem;
  text-align: center;
}
.band-indigo figcaption { color: rgba(233, 224, 206, .62); }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(2.4rem, 6vw, 4.5rem); align-items: center; }

/* ---------- the chandler's list ---------- */

.systems { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 3rem; }
.systems li { border-bottom: 1px solid var(--rule-light); }
.systems a {
  display: block;
  padding: .85rem 0;
  font-variant: small-caps;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-decoration: none;
}

/* ---------- case notice ---------- */

.notice { border: 1px solid var(--rule); background: rgba(233, 224, 206, .5); padding-bottom: 1.8rem; }
.notice img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; outline: 0; border-bottom: 1px solid var(--rule); }
.notice .notice-body { padding: 1.6rem 1.8rem 0; }
.notice h3 { margin-bottom: .4em; }
.notice h3 a { text-decoration: none; }
.notice p { color: var(--ink-soft); }
.notice .more { font-variant: small-caps; letter-spacing: .09em; font-size: 1.08rem; }

/* ---------- articles of agreement ---------- */

.articles-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.articles-table caption {
  font-variant: small-caps;
  letter-spacing: .13em;
  color: var(--brown);
  text-align: center;
  padding-bottom: 1.1rem;
  font-size: 1.05rem;
}
.articles-table th, .articles-table td {
  border-top: 1px solid var(--rule-faint);
  padding: 1rem .7rem;
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
}
.articles-table thead th {
  border-top: 1px solid var(--walnut);
  border-bottom: 1px solid var(--gilt);
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  letter-spacing: .1em;
  color: var(--indigo);
  font-size: 1.3rem;
}
.articles-table tbody tr:last-child td, .articles-table tbody tr:last-child th { border-bottom: 1px solid var(--walnut); }
.articles-table .rate { font-family: "Cormorant Garamond", serif; font-size: 1.85rem; color: var(--indigo); white-space: nowrap; }
.articles-table .rate small { display: block; font-family: "EB Garamond", serif; font-size: .86rem; color: var(--ink-soft); white-space: normal; margin-top: .2rem; }
.articles-table .mark { text-align: center; color: var(--gilt); font-size: 1.1rem; }
.articles-table .none { text-align: center; color: var(--rule-faint); }

.guarantee {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: 46ch;
  margin-inline: auto;
  font-style: italic;
  color: var(--ink-soft);
}
.guarantee img { width: 84px; height: auto; flex: none; border: 0; outline: 0; filter: none; }
.guarantee p { margin: 0; }

/* a small engraving standing over a section heading, the way a chapter
   vignette sits over its chapter */
.vignette {
  display: block;
  height: 86px;
  width: auto;
  margin: 0 auto 1.4rem;
  opacity: .92;
  border: 0;
  outline: 0;
  filter: none;
}
.page-head .vignette { height: 108px; }
.vignette-wide { height: 76px; }
.vignette-left { margin-left: 0; margin-right: auto; height: 96px; }

/* the tool that does each step, standing over it */
.step-mark {
  display: block;
  height: 62px;
  width: auto;
  margin: 0 0 1rem;
  opacity: .9;
  border: 0;
  outline: 0;
  filter: none;
}

/* ---------- contact ---------- */

.contact-card { border: 1px solid var(--rule-light); outline: 1px solid rgba(196, 154, 102, .3); outline-offset: 6px; padding: clamp(1.7rem, 3vw, 2.4rem); }
.contact-card h3 { margin-bottom: 1rem; }
.contact-card ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.contact-card li { padding: .7rem 0; border-top: 1px solid var(--rule-light); font-size: 1.12rem; }
.contact-card li:first-child { border-top: 0; }
.contact-card p { margin: 0; font-size: .96rem; color: rgba(233, 224, 206, .58); }

/* ---------- page heads and long text ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  color: rgba(233, 224, 206, .86);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.page-head .scene { opacity: .24; }
.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { color: #F3EBDA; margin-bottom: .45em; }
.page-head p { max-width: 52ch; margin: 0 auto; color: rgba(233, 224, 206, .78); }

.article { padding-block: var(--band); }
.article > .narrow > p:first-of-type::first-letter {
  float: left;
  font-family: "Cormorant Garamond", serif;
  font-size: 4.4rem;
  line-height: .8;
  padding: .08em .1em 0 0;
  color: var(--brown);
}
.article h2 { margin-top: 2em; }
.article h3 { margin-top: 1.7em; font-variant: small-caps; letter-spacing: .06em; }
.article h2:first-child, .article h3:first-child { margin-top: 0; }
.article ul, .article ol { max-width: var(--measure); padding-left: 1.3rem; }
.article li { margin-bottom: .5em; }
.article figure { margin: 2.8rem 0; }
.article strong { font-weight: 600; }

.meta {
  font-variant: small-caps;
  letter-spacing: .09em;
  font-size: 1.02rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--gilt);
  padding-top: 1.2rem;
  margin-top: 2.8rem;
}

.posts { list-style: none; padding: 0; margin: 0; }
.posts li { border-top: 1px solid var(--rule-faint); }
.posts li:first-child { border-top: 1px solid var(--walnut); }
.posts li:last-child { border-bottom: 1px solid var(--walnut); }
.post-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.6rem; padding: 2rem 0; }
.post-row .when { font-variant: small-caps; letter-spacing: .08em; color: var(--ink-soft); font-size: 1.02rem; }
.post-row h3 { margin-bottom: .3em; }
.post-row h3 a { text-decoration: none; }
.post-row h3 a:hover { text-decoration: underline; }
.post-row p { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) { .post-row { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- footer ---------- */

.foot { background: var(--indigo); color: rgba(233, 224, 206, .78); padding-block: clamp(3rem, 6vw, 4rem) 2rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 2.6rem; align-items: start; }
.foot h4 {
  font-variant: small-caps;
  font-weight: 400;
  font-size: 1.12rem;
  letter-spacing: .12em;
  color: var(--tan);
  margin: 0 0 1rem;
}
.foot p { color: rgba(233, 224, 206, .78); max-width: 44ch; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .55rem; }
.foot a { color: rgba(233, 224, 206, .9); text-decoration: none; }
.foot a:hover { color: #F3EBDA; text-decoration: underline; text-decoration-color: var(--tan); }
.brand-foot { display: inline-block; margin-bottom: 1.2rem; }
.brand-foot img { height: 56px; width: auto; }
.colophon {
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule-light);
  font-size: .94rem;
  color: rgba(233, 224, 206, .55);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.8rem;
}
.colophon p { margin: 0; color: inherit; max-width: none; }

@media print {
  .masthead, .foot, .btn, .rope { display: none; }
  body { background: #fff; color: #000; background-image: none; }
}

/* ---------- the drawings -------------------------------------------
   Line engravings, drawn as SVG rather than fetched: a full-rigged
   ship as the printer's device on the title page, a chart rose behind
   one band, and a run of chart waves used as a rule.
   ------------------------------------------------------------------ */








/* portrait photographs are hung as plates rather than run full width */
.article figure img, .plate img { max-height: 620px; width: auto; margin-inline: auto; }
.plate { text-align: center; }



/* ---------- the firm ------------------------------------------------
   Three arrangements of the same material, built so they can be looked
   at side by side. Only one survives.
   ------------------------------------------------------------------ */

/* a portrait hung as a plate, and the frame that stands in until there
   is a real photograph to put in it */
.portrait { margin: 0; }
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--walnut);
  outline: 1px solid rgba(169, 130, 53, .5);
  outline-offset: 5px;
  filter: sepia(.34) contrast(1.03) saturate(.72);
}
.portrait figcaption { text-align: left; }

.plate-empty {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--walnut);
  outline: 1px solid rgba(169, 130, 53, .5);
  outline-offset: 5px;
  background: var(--vellum-dk);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.plate-empty span {
  font-variant: small-caps;
  letter-spacing: .1em;
  font-size: .98rem;
  color: var(--ink-soft);
  text-align: center;
}

/* A — the muster roll */
.roll { list-style: none; padding: 0; margin: 0; }
.roll > li { border-top: 1px solid var(--rule-faint); }
.roll > li:first-child { border-top: 1px solid var(--walnut); }
.roll > li:last-child { border-bottom: 1px solid var(--walnut); }
.roll-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem;
  padding: 2.2rem 0;
  align-items: start;
}
.roll-row .portrait img, .roll-row .plate-empty { aspect-ratio: 1 / 1; }
.roll-row h3 { margin-bottom: .2em; }
.roll-row .role { font-variant: small-caps; letter-spacing: .09em; color: var(--brown); margin: 0; }
.roll-row p { margin: 0; }
.roll-row .duties { color: var(--ink-soft); }
@media (max-width: 760px) {
  .roll-row { grid-template-columns: 96px minmax(0, 1fr); }
  .roll-row .duties { grid-column: 1 / -1; }
}

/* B — two plates facing */
.facing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2.5rem, 6vw, 5rem); }
.facing .person { display: grid; gap: 1.4rem; }
.facing h3 { margin-bottom: .1em; }
.facing .role { font-variant: small-caps; letter-spacing: .1em; color: var(--brown); margin: 0 0 1rem; }
.facing p { max-width: none; }

/* C — the founder, and the bench behind him */
.founder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.founder .portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 800px) { .founder { grid-template-columns: 1fr; } }
.bench { list-style: none; padding: 0; margin: 0; }
.bench li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.6rem; padding: 1.3rem 0; border-top: 1px solid var(--rule-faint); }
.bench li:first-child { border-top: 1px solid var(--walnut); }
.bench li:last-child { border-bottom: 1px solid var(--walnut); }
.bench .who { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; color: var(--indigo); }
.bench .who span { display: block; font-family: "EB Garamond", serif; font-variant: small-caps; letter-spacing: .09em; font-size: .98rem; color: var(--brown); }
.bench p { margin: 0; color: var(--ink-soft); }
@media (max-width: 680px) { .bench li { grid-template-columns: 1fr; gap: .4rem; } }

/* the note that marks these as drafts — delete with the drafts */
.draft-note {
  border: 1px dashed var(--brown);
  padding: 1rem 1.3rem;
  margin-bottom: 2.5rem;
  font-size: .98rem;
  color: var(--ink-soft);
}
.draft-note p { margin: 0; max-width: none; }
.hold { color: var(--brown); font-style: italic; }