/* --------------------------------------------------------------------------
   Hong Kong Society of Authorized Persons — website stylesheet
   Palette taken from the name card: navy #16325C, gold #E0B14A.
   No JavaScript, no web fonts, no external requests — the whole site is
   static files that can be dropped onto any host.
   -------------------------------------------------------------------------- */

:root {
  --navy: #16325C;
  --navy-deep: #0E2140;
  --gold: #E0B14A;
  --gold-soft: #F3E2B8;
  --ink: #1C2530;
  --muted: #5A6675;
  --rule: #D8DDE4;
  --paper: #FFFFFF;
  --paper-warm: #F7F5F0;
  --measure: 66rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif TC", "Songti TC", serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* A designed line break in a heading — dropped on a narrow screen, where the
   line it holds would be wider than the screen and push the page sideways.
   `display: none` on a <br> removes the break; the default `inline` keeps it. */
br.desk { display: none; }

/* --- language switch ----------------------------------------------------
   Three radios — English, Traditional Chinese, Simplified Chinese — and no
   JavaScript. The inputs sit at the top of <body>; the rules below reach
   through to the content with a sibling combinator. A radio group always
   has one member checked, so there is no "nothing selected" state to
   handle.

   `display: revert` puts each element back to its own default — a span
   goes inline, a div or p goes block — so the same two classes work on
   headings, paragraphs and inline labels alike. */
.l-en, .l-hant, .l-hans {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.lang-en { display: revert; }
.hant, .hans { display: none; }

/* Choosing a Chinese script hides the English. English is the default, so
   there is no rule for #l-en — it only has to switch the others off. */
#l-hant:checked ~ .page .lang-en { display: none; }
#l-hans:checked ~ .page .lang-en { display: none; }
#l-hant:checked ~ .page .hant { display: revert; }
#l-hans:checked ~ .page .hans { display: revert; }

/* The masthead carries the Society's name in the language being read: the
   English name in English, the Chinese name in whichever Chinese script is
   chosen. Jeff asked for the Chinese versions to carry the Chinese only,
   with no English set underneath it. */
.wm { display: revert; }
#l-en:checked ~ .page .wm.hant,
#l-en:checked ~ .page .wm.hans { display: none; }
#l-hant:checked ~ .page .wm.hans { display: none; }
#l-hans:checked ~ .page .wm.hant { display: none; }
#l-hant:checked ~ .page .wordmark .en,
#l-hans:checked ~ .page .wordmark .en { display: none; }

.lbl {
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.15rem 0.55rem;
  color: var(--muted);
  background: var(--paper);
  user-select: none;
  white-space: nowrap;
}
.lbl:hover { border-color: var(--gold); color: var(--navy); }

/* The button for the language you are reading in is filled in, so the state
   is visible without having to remember which one you pressed. */
#l-en:checked ~ .page .lbl-en,
#l-hant:checked ~ .page .lbl-hant,
#l-hans:checked ~ .page .lbl-hans {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

.lbl-set { display: flex; gap: 0.3rem; }

/* --- layout -------------------------------------------------------------- */

.page { display: flex; flex-direction: column; min-height: 100vh; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.crest {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.wordmark { flex: 1 1 auto; line-height: 1.25; }
.wordmark .en {
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: 0.015em;
  color: var(--navy);
}
.wordmark .zh {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy);
}

nav {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: var(--measure);
}
nav li { margin: 0; }
nav a {
  display: block;
  padding: 0.7rem 0.9rem;
  color: var(--navy);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
nav a:hover { border-bottom-color: var(--gold); }
nav a[aria-current="page"] { border-bottom-color: var(--gold); font-weight: 600; }

/* --- hero ---------------------------------------------------------------- */

.hero {
  background: var(--navy);
  color: #EDF1F6;
  padding: 4.5rem 0 4rem;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.16;
  margin: 0 0 0.6rem;
  color: #FFFFFF;
}
.hero .zh-title {
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  margin: 0 0 1.4rem;
  color: var(--gold-soft);
  font-weight: 400;
}
.hero p {
  max-width: 40rem;
  font-size: 1.05rem;
  color: #C9D3E0;
  margin: 0 0 1.6rem;
}
.hero .rule {
  width: 4.5rem;
  height: 3px;
  background: var(--gold);
  border: 0;
  margin: 0 0 1.6rem;
}
.hero .meta {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #93A6BE;
  text-transform: uppercase;
}

/* --- the city behind the home-page title --------------------------------- */

/* Jeff's photograph of Hong Kong housing, graded to the Society's palette —
   the name card's navy in the shadows, its gold on the brightest edges, with
   a little of the photograph's own colour left in the midtones — so it reads
   as part of the identity rather than a picture dropped onto a page.

   Two rules govern the veil. First, it is the Society's own navy and not a
   darker blue: wherever the veil is at full strength the banner is exactly
   the colour the other pages' banners are, so the band never reads as
   black. Second, it is solid only across the bottom of the band, where the
   title sits, and it is gone by the time it reaches the upper half — so the
   city reads across most of the banner rather than as a strip at the top.

   THE CROP IS ANCHORED TO THE TOP, and that is deliberate. `cover` crops
   whatever the band cannot show, and a percentage position moves that crop
   as the band changes height — so the city slid up and down when the
   window was resized, and the picture looked like a different photograph
   at different sizes. Pinning it to the top keeps the same towers in the
   same place at every width and every browser zoom level.

   The file itself is 2560 wide. The photograph Jeff sent is only 672, so
   this is an enlargement, but it is the last one: the browser reduces it
   to fit the band instead of blowing it up, which is what makes it hold
   together at a large size. */
.hero--photo {
  background-color: var(--navy);
  background-image:
    linear-gradient(to top,
      var(--navy) 0%,
      var(--navy) 24%,
      rgba(22, 50, 92, 0.90) 31%,
      rgba(22, 50, 92, 0.55) 39%,
      rgba(22, 50, 92, 0.18) 48%,
      rgba(22, 50, 92, 0) 56%),
    url("hero-hongkong.jpg");
  background-size: cover, cover;
  background-position: 0 0, center top;
  background-repeat: no-repeat;
  padding-top: clamp(8rem, 19vw, 16rem);
  padding-bottom: 2.2rem;
}

/* The title is longer than the other pages', so it is set a step smaller
   and broken after the dash to keep it to two lines. */
.hero--photo h1 {
  font-size: clamp(1.7rem, 4.1vw, 2.5rem);
}

/* The title has to sit on one line, so it is sized to the line rather than
   the other way round. The Chinese is shorter, so it can be set larger. */
.hero--photo h1 .lang-en {
  font-size: clamp(1rem, 1.85vw, 1.7rem);
  letter-spacing: 0.005em;
}
.hero--photo h1 .hant,
.hero--photo h1 .hans {
  font-size: clamp(1.25rem, 2.5vw, 2.2rem);
}

/* The two supporting lines under the title. They are the Society's
   statement of what an Authorized Person is and what the Society is, so
   they are set apart from the title but not so faint that they go. */
.hero--photo .hero-sub {
  max-width: 46rem;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  color: #C9D3E0;
  margin: 0 0 0.55rem;
  line-height: 1.5;
}
.hero--photo .hero-sub:last-child {
  margin-bottom: 0;
}

/* --- content ------------------------------------------------------------- */

main { flex: 1 1 auto; }

section { padding: 3.2rem 0; }
section + section { border-top: 1px solid var(--rule); }
section.warm { background: var(--paper-warm); }

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.4rem;
  font-weight: 700;
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 0.2rem;
}
.zh-h2 {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 1.6rem;
}
h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.16rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
h4 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.08rem; color: var(--ink); }
.muted { color: var(--muted); }

a { color: var(--navy); }
a:hover { color: var(--gold); }

ul.plain { list-style: none; padding: 0; margin: 0 0 1.1rem; }
ul.plain li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.5rem;
}
ul.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

/* --- cards --------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0 0;
}
/* Four sections read better two by two than four across on one line. */
.grid.four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .grid.four { grid-template-columns: 1fr; }
}
.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 1.4rem 1.4rem 1.5rem;
}
.card .n {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}
.card h3 { margin-bottom: 0.45rem; }
.card p { font-size: 0.95rem; color: var(--muted); }

/* A card that is really a link to a file. */
.card.download { display: flex; flex-direction: column; }
.card.download .file {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: auto;
  padding-top: 0.8rem;
}

/* --- people --------------------------------------------------------------
   The founders and the council: photograph on the left, words on the
   right, one person after another down the page. The president's
   photograph is 30% larger than the rest. */

.person {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.person:first-of-type { border-top: 0; }

.person .pic {
  flex: 0 0 auto;
  width: 190px;
}
.person .pic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}
/* The president is 30% larger than the other five. */
.person.lead .pic { width: 247px; }

.person .who { flex: 1 1 auto; min-width: 0; }
.person .who h3 { margin-bottom: 0.15rem; }
.person .who .en-name {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--navy);
}
.person .who .meta {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.person .who .meta b { color: var(--gold); font-weight: 600; }
.person .who p { font-size: 0.96rem; }

@media (max-width: 640px) {
  .person { flex-direction: column; gap: 1rem; }
  .person .pic, .person.lead .pic { width: 190px; }
}

/* --- legacy timeline ---------------------------------------------------- */

.era {
  border-left: 2px solid var(--gold);
  padding: 0 0 0 1.2rem;
  margin-bottom: 1.6rem;
}
.era .year {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--navy);
  line-height: 1.2;
}
.era p { font-size: 0.96rem; margin: 0.3rem 0 0; }

figure.photo { margin: 2rem 0 0; }
figure.photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}
figure.photo figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* --- the development timeline --------------------------------------------

   The diagram is drawn on a white ground, in the colours of the PDF it
   came from. On the warm section it would float as a white rectangle on
   cream, so it is given a white plate of its own, with the caption set
   below a rule inside the plate.

   It fills the width like every other picture on the site. An earlier
   version held it at a minimum width and let it scroll sideways on a
   phone, which kept the type readable but made the diagram run off the
   side of the screen, and that was worse. The caption opens the same
   file at full size, where it can be read on a phone. */
figure.timeline {
  margin: 2.4rem 0 0;
  padding: 1.4rem 1.4rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
figure.timeline img {
  display: block;
  width: 100%;
  height: auto;
}
figure.timeline figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* --- objectives and mission ----------------------------------------------

   Two boxes. The Objective is a single sentence; the Mission is three,
   and the three are kept together in one box rather than split into
   three of them. The wording is set in capitals at one size - Jeff asked
   for the type enlarged and level, with no part of a line smaller than
   the rest of it. */
.grid.one { grid-template-columns: 1fr; }

.card.say-card { padding: 1.7rem 1.8rem 1.9rem; }

.card.say-card .n {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.card.say-card .say {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  line-height: 1.3;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin: 0 0 0.85rem;
}
.card.say-card .say:last-child { margin-bottom: 0; }

/* --- the member list, behind an acceptance -------------------------------

   The list is not shown until the reader has accepted the important
   note and the disclaimer. There is no decline: the button is the only
   way on, and it goes away once it has been used.

   This is a courtesy and not a lock. The site is static and has no
   server, so the list is in the page and the stylesheet only decides
   whether it is drawn - anyone who reads the source, or ticks the box
   in a developer tool, will find it. If the list has to be genuinely
   private it has to live somewhere the browser is never sent. */
.accept-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.notes {
  margin: 1.8rem 0 0;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.notes h3 { margin-bottom: 0.7rem; }
.notes h3 + h3 { margin-top: 1.6rem; }
.notes p { font-size: 0.95rem; }
.notes ol { margin: 0; padding-left: 1.4rem; }
.notes li { margin-bottom: 0.55rem; font-size: 0.95rem; }
.notes li:last-child { margin-bottom: 0; }

.accept-row {
  margin: 1.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.accept-btn {
  display: inline-block;
  background: var(--navy);
  color: #FFFFFF;
  border: 1px solid var(--navy);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}
.accept-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

/* Rejecting takes the reader back to the home page, so it is a link,
   and it is a quiet one - outlined rather than filled. */
.reject-btn {
  display: inline-block;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--rule);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.reject-btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--navy);
}

/* Close puts the list away again. It is a label on the same box as the
   acceptance, so clicking it unticks the box and the gate comes back. */
.close-row { display: none; margin: 1.6rem 0 0; }
.close-btn {
  display: inline-block;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--rule);
  padding: 0.7rem 1.3rem;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
}
.close-btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--navy);
}

.member-list { display: none; margin-top: 1.6rem; }
.member-list table { margin-top: 0; }
#accept:checked ~ .accept-row { display: none; }
#accept:checked ~ .close-row { display: block; }
#accept:checked ~ .member-list { display: block; }
/* The button is a label, so the keyboard focus has to be shown on it
   rather than on the box the label points at. */
#accept:focus-visible ~ .accept-row .accept-btn,
#accept:focus-visible ~ .close-row .close-btn {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* The email is the one column that can be long, and the table already
   has five of them, so on a narrow screen the table is scrolled
   sideways rather than squeezed until the names break apart. */
@media (max-width: 640px) {
  .member-list { overflow-x: auto; }
  .member-list table { min-width: 40rem; }
}

td.mail { white-space: nowrap; }

/* A note that carries a point the reader must not miss - what the
   Society does not do, for instance. */
.note {
  margin: 1.3rem 0 0;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--navy);
  background: var(--paper-warm);
  font-size: 0.95rem;
}

/* --- table --------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
  padding-bottom: 0.7rem;
}
th, td {
  text-align: left;
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 2px solid var(--navy);
}
td.role { color: var(--navy); white-space: nowrap; }
td.no {
  font-family: var(--serif);
  color: var(--gold);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* --- marker for text Jeff still has to supply ---------------------------- */

.confirm {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A6410;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.5rem;
  vertical-align: 0.25em;
  white-space: nowrap;
}
.placeholder {
  border-left: 3px solid var(--gold);
  background: #FCF9F1;
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.placeholder strong { color: var(--navy); font-weight: 600; }

/* A slot reserved for text that will be supplied later — the biography of
   each founder, for instance. It shows the shape of what is coming without
   pretending to be it. */
.reserved {
  border: 1px dashed var(--gold);
  background: #FCF9F1;
  padding: 0.9rem 1.1rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.reserved .tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A6410;
  margin-bottom: 0.3rem;
}

/* The President's message on the home page. It is a letter, so it is set
   as running text with the signature standing on its own. */
.message p {
  max-width: 46rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.message p.salute {
  color: var(--navy);
  font-weight: 600;
}
.message .sign {
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.message .sign strong {
  color: var(--navy);
  font-weight: 600;
}

/* A founder's biography, once the Society has written it. */
.person .who .bio {
  font-size: 0.96rem;
  color: var(--ink);
}
.person .who .bio p { font-size: 0.96rem; }

/* --- call to action ------------------------------------------------------ */

.cta {
  background: var(--navy-deep);
  color: #E7EDF5;
  padding: 2.6rem 0;
}
.cta h2 { color: #FFFFFF; }
.cta .zh-h2 { color: #9FB0C6; }
.cta a.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.cta a.btn:hover { background: #FFFFFF; color: var(--navy-deep); }

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

footer {
  background: var(--navy-deep);
  color: #A9B8CB;
  font-size: 0.88rem;
  padding: 2.4rem 0 2.6rem;
}
footer h3 {
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
footer a { color: #D9E2EC; }
footer a:hover { color: var(--gold); }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.8rem;
}
footer .fine {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 1.8rem;
  padding-top: 1.1rem;
  font-size: 0.8rem;
  color: #8494A8;
}
/* The registered name, with its liability status. Cap. 622B requires it on
   the company's website, so it sits here at the very bottom of the page. */
footer .registered {
  margin-top: 0.7rem;
  font-size: 0.76rem;
  color: #7C8CA0;
  letter-spacing: 0.02em;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 3rem 0 2.8rem; }
  /* On a phone the picture is behind the whole title block, so the veil
     goes flat rather than graded across the width, and the strip above the
     title is kept open so the city still shows. */
  .hero--photo {
    background-image:
      linear-gradient(to top,
        var(--navy) 0%,
        var(--navy) 52%,
        rgba(22, 50, 92, 0.92) 64%,
        rgba(22, 50, 92, 0.55) 80%,
        rgba(22, 50, 92, 0.18) 100%),
      url("hero-hongkong.jpg");
    background-position: 0 0, center top;
    padding-top: 8rem;
  }
  section { padding: 2.4rem 0; }
  .crest { width: 44px; height: 44px; }
  nav a { padding: 0.6rem 0.7rem; font-size: 0.86rem; }
  .masthead { flex-wrap: wrap; }
  .wordmark { min-width: 0; }
  .wordmark .en { font-size: 1.02rem; }
  .wordmark .zh { font-size: 0.98rem; }
  .grid { grid-template-columns: 1fr; }
  table { font-size: 0.88rem; }
  th, td { padding: 0.6rem 0.5rem 0.6rem 0; }
  footer .foot-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* Above the small-screen breakpoint the designed line break comes back. */
@media (min-width: 641px) {
  br.desk { display: inline; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  header, .cta, footer { display: none; }
  body { font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --- the Council photographs ---------------------------------------------

   The Council is two pictures of the six of them together: the colour
   one, and a line drawing that names each member and office. The
   individual portraits have already been shown in the Founders section
   above, and repeating them reads as a duplicate. */
figure.council-photo {
  margin: 2rem 0 0;
}
figure.council-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper);
}
figure.council-photo figcaption {
  font-size: 0.86rem;
  color: var(--muted);
  margin-top: 0.6rem;
}