/* American Mahjong Royalty: the hall, the portrait pages and the nomination form.
   The private edition look (Lea Anne, 2026-09-23): ivory paper, gold hairlines,
   one coral accent used sparingly, Playfair set light and italic, Crimson for
   reading, Lato small caps for the labels, soft tinted notes.
   House style matches the letter web edition (letters/letter.css, PR #579): the
   paper stays light in dark mode because it is paper, text is 15px at the least,
   buttons are rounded with a soft shadow and a centered label, pictures sit crisp
   in a thin gold frame on a white mat. */

:root {
  --rp-paper: #FBF8F2; /* theme-ok: printed paper, light in both themes (her design) */
  --rp-ink: #221C18;
  --rp-body: #3D3530;
  --rp-acc: #B26E5A;        /* ornaments and large type */ /* theme-ok: printed paper, light in both themes (her design) */
  --rp-acc-text: #9E5A47;   /* coral for any small text, 4.9 to 1 on ivory */ /* theme-ok: printed paper */
  --rp-acc-deep: #6E3B2E;   /* the lip under a button */ /* theme-ok: printed paper */
  --rp-acc-ink: #FFFFFF;
  --rp-gold: #C8B48B;
  --rp-soft: #7A6E66;
  --rp-card: #FFFFFF;
  --rp-blush: #F5E6DF;
  --rp-honey: #F4EDDC;
  --rp-sage: #E9EFE6;
  --rp-sky: #E6EDF1;
  --rp-shadow: 34,28,24;
  --rp-sans: 'Lato', Helvetica, Arial, sans-serif;
}
/* The paper stays ivory with its own ink in every theme, exactly as Letter 28 does:
   the site's dark tokens reach only the header and footer that shared.js draws.
   Every paper area names its own background and ink, so nothing inherits the
   site's light-on-dark body ink in dark mode (OS dark, or the site's Dark setting). */
html:has(body.royalty) { background: var(--rp-paper); }
body.royalty { background: var(--rp-paper); color: var(--rp-body); color-scheme: light; }
body.royalty .rp-mast, body.royalty .rp-grid, body.royalty .rp-hall, body.royalty .rp-more,
body.royalty .rp-form-wrap, body.royalty .rp-fine { background: var(--rp-paper); color: var(--rp-body); color-scheme: light; }

/* ---------- the masthead ---------- */
.rp-mast { max-width: 820px; margin: 0 auto; padding: 150px 20px 40px; text-align: center; }
.rp-house { font-family: var(--rp-sans); font-size: 15px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--rp-ink); padding-left: .24em; margin: 0; }
.rp-house a { color: inherit; text-decoration: none; }
.rp-rule { display: flex; align-items: center; gap: 14px; max-width: 320px; margin: 18px auto; }
.rp-rule span { flex: 1; height: 1px; background: var(--rp-gold); }
.rp-rule i { font-style: normal; color: var(--rp-acc); font-size: 9px; line-height: 1; }
.rp-title { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--rp-ink);
  font-size: clamp(38px, 6.4vw, 68px); line-height: 1.06; margin: 14px 0 12px; text-wrap: balance; }
.rp-also { font-family: var(--body); font-style: italic; font-size: 20px; color: var(--rp-soft); margin: 0 0 12px; }
.rp-tag { font-family: var(--rp-sans); font-size: 15px; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase;
  color: var(--rp-acc-text); margin: 0; }
.rp-lede { font-family: var(--body); font-size: 19px; line-height: 1.7; color: var(--rp-body);
  max-width: 640px; margin: 22px auto 0; }

/* ---------- the two sides: notes on the left, the reading on the right ---------- */
.rp-grid { display: grid; grid-template-columns: 260px minmax(0, 700px); justify-content: center;
  gap: 60px; max-width: 1160px; margin: 0 auto; padding: 0 24px 40px; align-items: start; }
.rp-margin { display: flex; flex-direction: column; padding: 6px 36px 6px 0; border-right: 1px solid var(--rp-gold); }
.rp-note + .rp-note::before { content: "\25C6\2003\25C6\2003\25C6"; display: block; text-align: center; color: var(--rp-acc);
  font-size: 8px; line-height: 1; letter-spacing: .2em; margin: 30px 0 28px; }
.rp-k { display: block; font-family: var(--rp-sans); font-size: 15px; letter-spacing: .14em; line-height: 1.5;
  text-transform: uppercase; color: var(--rp-acc-text); margin-bottom: 10px; font-weight: 700; }
.rp-note h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 20px;
  line-height: 1.25; color: var(--rp-ink); margin: 0 0 8px; }
.rp-note p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; color: var(--rp-body); }
.rp-note p:last-child { margin-bottom: 0; }
.rp-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-note li { font-size: 16px; line-height: 1.45; }
.rp-go { font-family: var(--rp-sans); font-size: 15px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase;
  color: var(--rp-ink); text-decoration: none; border-bottom: 1px solid var(--rp-gold); padding-bottom: 2px;
  overflow-wrap: anywhere; }
.rp-go:hover, .rp-go:focus-visible { color: var(--rp-acc-text); border-color: var(--rp-acc); outline: none; }
.rp-li-sub { display: block; font-style: italic; color: var(--rp-soft); font-size: 15.5px; margin-top: 3px; }

.rp-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px;
  box-sizing: border-box; font-family: var(--rp-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rp-acc-ink); background: var(--rp-acc-text);
  text-decoration: none; padding: 12px 22px 12px calc(22px + .14em); border: 0; border-radius: 8px; cursor: pointer; margin-top: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--rp-acc-deep), 0 4px 10px rgba(var(--rp-shadow), .18);
  transition: transform .08s ease, box-shadow .08s ease, background .15s; }
.rp-btn:hover { background: var(--rp-ink); }
.rp-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rp-acc-deep), 0 1px 3px rgba(var(--rp-shadow), .18); }
.rp-btn:focus-visible { outline: 3px solid var(--rp-ink); outline-offset: 3px; }
.rp-btn:disabled { opacity: .6; cursor: default; }
/* in the narrow notes column the label keeps to one line: a touch less spacing, and the
   spacing the last letter carries is given back on the left so the word stays centered */
.rp-margin .rp-btn { letter-spacing: .1em; padding: 12px 16px 12px calc(16px + .1em); }

/* the reading column */
.rp-main { min-width: 0; }
.rp-main p { font-family: var(--body); font-size: 19px; line-height: 1.72; color: var(--rp-body); margin: 0 0 20px; }
.rp-first::first-letter { float: left; font-family: var(--serif); font-size: 72px; line-height: .8;
  padding: 8px 10px 0 0; color: var(--rp-acc); }
.rp-pic { display: flex; align-items: center; gap: 22px; margin: 0 0 30px; padding: 0 0 26px;
  border-bottom: 1px solid var(--rp-gold); }
.rp-frame { flex: 0 0 auto; display: block; border: 1px solid var(--rp-gold); padding: 8px; background: var(--rp-card); }
.rp-frame img { display: block; width: 70px; height: auto; }
.rp-pic p { margin: 0 !important; font-family: var(--serif) !important; font-style: italic;
  font-size: 23px !important; line-height: 1.35 !important; color: var(--rp-ink) !important; }
.rp-sign { font-style: italic; color: var(--rp-soft) !important; font-size: 17px !important; }

/* ---------- the hall ---------- */
.rp-hall { max-width: 1080px; margin: 0 auto; padding: 0 20px 30px; }
.rp-group { margin: 0 0 60px; }
.rp-group-h { text-align: center; margin: 0 0 28px; }
.rp-orn { color: var(--rp-acc); font-size: 10px; letter-spacing: 1.2em; padding-left: 1.2em; margin: 0 0 14px; }
.rp-group-h h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 28px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ink); margin: 0; text-wrap: balance; }
.rp-group-h h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--rp-acc); margin: 14px auto 0; }
.rp-group-h p { font-family: var(--body); font-style: italic; font-size: 18px; color: var(--rp-soft); margin: 12px 0 0; }
.rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.rp-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px; border-radius: 4px; text-decoration: none; background: var(--rp-honey);
  border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.rp-cards .rp-card:nth-child(4n+1) { background: var(--rp-blush); }
.rp-cards .rp-card:nth-child(4n+3) { background: var(--rp-sage); }
.rp-cards .rp-card:nth-child(4n+4) { background: var(--rp-sky); }
.rp-card:hover, .rp-card:focus-visible { border-color: var(--rp-gold); transform: translateY(-2px); outline: none; }
.rp-initial { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rp-gold); color: var(--rp-acc);
  display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 25px;
  background: var(--rp-card); }
.rp-card h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 21px; line-height: 1.2;
  color: var(--rp-ink); margin: 2px 0 4px; }
.rp-card .rp-card-also { font-family: var(--rp-sans); font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rp-soft); margin: 0 0 8px; line-height: 1.5; }
.rp-card p { font-size: 17px; line-height: 1.5; color: var(--rp-body); margin: 0 0 8px; }
.rp-card .rp-card-meta { font-family: var(--rp-sans); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rp-acc-text); margin: 0; }

.rp-band { max-width: 760px; margin: 10px auto 60px; padding: 30px 26px; text-align: center;
  background: var(--rp-card); border: 1px solid var(--rp-gold); border-radius: 4px; }
.rp-band h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 28px; color: var(--rp-ink); margin: 6px 0 10px; }
.rp-band p { font-size: 17.5px; line-height: 1.6; margin: 0 auto 14px; max-width: 560px; color: var(--rp-body); }
.rp-fine { max-width: 700px; margin: 0 auto 70px; padding: 0 20px; text-align: center; font-style: italic;
  font-size: 16px; line-height: 1.6; color: var(--rp-soft); }
.rp-fine a { color: var(--rp-soft); }

/* more of the royalty, at the foot of a portrait */
.rp-more { max-width: 980px; margin: 30px auto 0; padding: 40px 20px 0; border-top: 1px solid var(--rp-gold); text-align: center; }
.rp-more h2 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 28px; color: var(--rp-ink); margin: 6px 0 26px; }
.rp-more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
.rp-more-row a { display: grid; gap: 4px; padding: 6px 24px; text-decoration: none; color: var(--rp-ink); border-left: 1px solid var(--rp-gold); }
.rp-more-row a:first-child { border-left: 0; }
.rp-more-row em { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.rp-more-row span { font-size: 16px; line-height: 1.5; color: var(--rp-soft); }
.rp-more-row a:hover em, .rp-more-row a:focus-visible em { color: var(--rp-acc-text); }
.rp-more-foot { margin: 34px 0 70px; }

/* ---------- the nomination form ---------- */
.rp-form-wrap { max-width: 680px; margin: 0 auto; padding: 0 20px 70px; }
.rp-form { background: var(--rp-card); border: 1px solid var(--rp-gold); border-radius: 4px; padding: 30px 28px 26px; }
.rp-q { margin: 0 0 24px; }
.rp-q > label, .rp-q > .rp-qh { display: block; font-family: var(--rp-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--rp-ink); margin: 0 0 4px; }
.rp-q .rp-help { display: block; font-family: var(--body); font-style: italic; font-size: 16px; color: var(--rp-soft); margin: 0 0 10px; line-height: 1.45; }
.rp-q .rp-num { color: var(--rp-acc-text); margin-right: 6px; }
.rp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rp-form .ott-field { background: var(--rp-paper); color: var(--rp-ink); border: 1px solid var(--rp-gold); border-radius: 3px; font-size: 17px; }
.rp-form .ott-field:focus { border-color: var(--rp-acc); box-shadow: 0 0 0 3px rgba(var(--rp-shadow), .06); }
.rp-form textarea.ott-field { min-height: 110px; resize: vertical; line-height: 1.5; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { position: relative; }
.rp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rp-chip span { display: inline-block; font-family: var(--rp-sans); font-size: 15px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 11px 16px 11px calc(16px + .12em); border: 1px solid var(--rp-gold); border-radius: 8px; box-sizing: border-box;
  box-shadow: 0 2px 0 var(--rp-gold), 0 4px 10px rgba(var(--rp-shadow), .10); color: var(--rp-ink);
  background: var(--rp-paper); cursor: pointer; }
.rp-chip input:checked + span { background: var(--rp-acc-text); border-color: var(--rp-acc-text); box-shadow: 0 2px 0 var(--rp-acc-deep), 0 4px 10px rgba(var(--rp-shadow), .16); color: var(--rp-acc-ink); }
.rp-chip input:focus-visible + span { outline: 2px solid var(--rp-ink); outline-offset: 2px; }
.rp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rp-status { font-family: var(--body); font-size: 16px; color: var(--rp-soft); min-height: 22px; margin-top: 12px; }
.rp-done { font-family: var(--body); font-size: 20px; line-height: 1.55; color: var(--rp-ink); text-align: center; padding: 10px 0; }
.rp-done p { margin: 0 0 14px; }
.rp-done .sig { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--rp-acc-text); }

/* ---------- phone and tablet ---------- */
@media (max-width: 900px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rp-margin { order: 2; padding: 34px 0 0; border-right: 0; border-top: 1px solid var(--rp-gold); }
  .rp-more-row { grid-template-columns: minmax(0, 1fr); }
  .rp-more-row a { border-left: 0; border-top: 1px solid var(--rp-gold); padding: 16px 0; }
  .rp-more-row a:first-child { border-top: 0; }
}
@media (max-width: 700px) {
  .rp-mast { padding: 132px 16px 30px; }
  .rp-grid, .rp-hall { padding-left: 16px; padding-right: 16px; }
  .rp-main p { font-size: 18px; }
  .rp-first::first-letter { font-size: 60px; }
  .rp-frame img { width: 56px; }
  .rp-pic p { font-size: 20px !important; }
  .rp-row { grid-template-columns: minmax(0, 1fr); }
  .rp-form { padding: 22px 16px 20px; }
  .rp-form-wrap { padding: 0 16px 60px; }
}