/* millar.se — one stylesheet for the front page, the personal pages and the
   "wandered off" page. No build step, no external fonts, no trackers. */

:root {
  /* The colours of MacFarlane Red (Millar is a sept of Clan MacFarlane),
     kept for the scene, the lines and the buttons. The cloth itself is no
     longer drawn: the page is the night sky over the Clyde. */
  --t-red:   #c4211b;
  --t-green: #1c4a2a;
  --t-black: #16130f;
  --t-white: #f3eadb;

  /* the night sky: top of the window, and down at the horizon */
  --sky-top:     #0a141b;
  --sky-horizon: #17302f;

  --paper: #f7f3ea;
  --ink:   #1b1f2a;
  --muted: #5d6472;
  --rule:  #ddd5c3;

  /* Set by app.js from the hour in Stockholm: 0 at noon, ~0.55 at night. */
  --dusk: 0.15;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sky-top);
  -webkit-font-smoothing: antialiased;
}

/* ---------- the sky ---------- */

/* one plain night sky behind everything, a little lighter toward the horizon,
   where the scene stands; it deepens in the evening (--dusk, Stockholm time) */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-top) 25%, var(--sky-horizon) 100%);
}
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 9, calc(var(--dusk) * .7));
}

/* ---------- the scene: mill, Cumbrae, steamer, Glasgow, under MacFarlane's Lantern ---------- */

/* front page: a tall opening with the whole scene under the name */
.front .masthead {
  position: relative;
  isolation: isolate;          /* its own layer: the scene sits behind the name, above the sky */
  align-self: stretch;
  margin: -48px -16px 0;
  min-height: clamp(440px, 74vh, 760px);
  padding: clamp(28px, 8vh, 84px) 16px 0;
}
.front .masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(scene.svg?v=3) center bottom / cover no-repeat;
}
.front .masthead + .card { margin-top: -64px; }

/* narrow screens: the scene is wider than the window, so it drifts slowly from the mill to Glasgow and back */
@media (max-width: 760px) {
  .front .masthead { min-height: clamp(400px, 62vh, 560px); }
  .front .masthead::after { background-size: 940px auto; background-position: 0% 100%; animation: pan 46s ease-in-out infinite alternate; }
  body:not(.dark)::after { background-size: 760px auto; height: 285px; }
}
@keyframes pan { from { background-position: 0% 100%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .front .masthead::after { animation: none; background-position: 50% 100%; } }

/* every other page: the same scene, low along the foot of the window */
body:not(.dark)::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: min(40vh, 380px);
  z-index: -1;
  pointer-events: none;
  background: url(scene.svg?v=3) center bottom / cover no-repeat;
}
body:has(main.front)::after { display: none; }

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

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  gap: 28px;
}

.card {
  width: 100%;
  max-width: 760px;
  background: var(--paper);
  border-radius: 6px;
  padding: 40px 32px 32px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 24px 60px rgba(0,0,0,.45);
  text-align: center;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(56px, 13vw, 120px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
}

.front h1 { color: var(--t-white); text-shadow: 0 3px 24px rgba(0,0,0,.55); }

.tagline {
  margin: 10px 0 0;
  color: var(--t-white);
  opacity: .85;
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.masthead { text-align: center; }

a { color: inherit; }

/* ---------- avatars: one frame for everybody ---------- */

.avatar {
  --c: var(--t-green);
  --size: 96px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  /* ring in the person's colour, a paper gap, then the face */
  background: var(--c);
  padding: calc(var(--size) * .045);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 16px rgba(40, 12, 8, .25);
}

.avatar .face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: calc(var(--size) * .035) solid var(--paper);
  overflow: hidden;
  display: grid;
  place-items: center;
  /* monogram ground: the person's colour, flat (a photo covers it) */
  background: var(--c);
  color: #fff;
  font-family: var(--serif);
  font-size: calc(var(--size) * .42);
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  user-select: none;
}

.avatar .face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- front page: the family tree ---------- */

.tree {
  --node: 116px;      /* width of one person, spacing included */
  --drop: 26px;       /* height of a connector */
  --line: 2px solid var(--t-green);
  overflow-x: auto;
  padding-bottom: 4px;
}

.tree ul {
  position: relative;
  display: flex;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: var(--drop) 0 0;
  list-style: none;
}

.tree > ul { padding-top: 0; }

.tree li {
  position: relative;
  padding-top: var(--drop);
}

/* room for a husband or wife. The same on both sides, so the person stays
   in the middle of their branch and the lines above and below still meet. */
.tree li.has-partner { padding-left: calc(var(--node) * .5); padding-right: calc(var(--node) * .5); }

/* the rail across the top of a row of brothers and sisters ... */
.tree li::before, .tree li::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--drop);
  border-top: var(--line);
}
.tree li::before { right: 50%; }
.tree li::after  { left: 50%; margin-left: -1px; border-left: var(--line); }

/* ... which stops at the eldest and the youngest */
.tree li:first-child::before, .tree li:last-child::after { border-top: 0; }
.tree li:first-child::after { border-top-left-radius: 8px; }
.tree li:last-child::before { border-right: var(--line); border-top-right-radius: 8px; margin-right: -1px; }
.tree li:last-child::after { border-left: 0; }
.tree li:first-child:last-child::before { border-radius: 0; }

/* the top of the tree hangs from nothing */
.tree > ul > li { padding-top: 0; }
.tree > ul > li::before, .tree > ul > li::after { display: none; }

/* the drop from a parent down to the rail */
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  height: var(--drop);
  border-left: var(--line);
}

.unit {
  position: relative;
  width: var(--node);
  margin: 0 auto;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: var(--node);
  padding: 8px 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}

.person:hover, .person:focus-visible {
  background: rgba(28, 74, 42, .08);
  transform: translateY(-3px);
  outline: none;
}

.person:focus-visible { box-shadow: 0 0 0 2px var(--t-green); }

.person .name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}

.person .born {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: -4px;
  font-variant-numeric: tabular-nums;
}

.person .host {
  font-size: 11px;
  color: var(--muted);
  margin-top: -4px;
  white-space: nowrap;
}

/* husband or wife: beside, not below, joined by a double line */
.person.partner {
  position: absolute;
  top: 0;
  left: 100%;
}

.person.partner::before {
  content: '';
  position: absolute;
  top: calc(8px + var(--avatar, 80px) / 2 - 3px);
  right: calc(50% + var(--avatar, 80px) / 2);
  width: calc(var(--node) - var(--avatar, 80px));
  height: 6px;
  border-top: var(--line);
  border-bottom: var(--line);
}
/* a former husband or wife: one line, not two */
.person.partner.former::before { border-bottom: 0; height: 2px; top: calc(8px + var(--avatar, 80px) / 2 - 1px); }

.tree .avatar { --size: var(--avatar, 80px); }

.hint {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.hint code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  background: rgba(28, 74, 42, .09);
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---------- where we come from: the line of generations ---------- */

.lineage { text-align: left; padding-top: 32px; }
.lineage h2 { font-family: var(--serif); font-size: 34px; font-weight: 600; margin: 0 0 10px; text-align: center; }
.lineage .lede { margin: 0 auto 26px; max-width: 56ch; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; }

.line { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; }
.line li { position: relative; padding: 0 0 26px 30px; border-left: 2px solid var(--t-green); margin-left: 8px; }
.line li:last-child { padding-bottom: 4px; }
.line li::before {
  content: ''; position: absolute; left: -9px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--t-red);
}
/* the last step runs on into the tree above */
.line li:last-child::before { background: var(--t-red); }
/* the names first, then when and where under them, in plain words */
.line h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; margin: 0 0 2px; }
.line .years { display: block; margin: 0 0 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.line h3 .amp { color: var(--t-red); font-style: italic; font-weight: 400; }
.line p { margin: 0; font-size: 15px; line-height: 1.6; }

.lineage .aside { margin: 22px auto 0; max-width: 60ch; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; text-align: center; color: var(--muted); }
.lineage .sources { margin: 12px auto 0; max-width: 64ch; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

/* ---------- the family tree page ---------- */

.treepage { justify-content: flex-start; }
.treepage h1 { color: var(--t-white); text-shadow: 0 3px 24px rgba(0,0,0,.55); font-size: clamp(44px, 9vw, 84px); }
.card.wide { max-width: 1180px; text-align: left; padding: 32px 28px 24px; }
.treepage .card h2 { font-family: var(--serif); font-size: 32px; font-weight: 600; margin: 0 0 8px; text-align: center; }
.treepage .lede { margin: 0 auto 14px; max-width: 70ch; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; }
.treepage .card:not(.wide) { text-align: center; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 0 0 18px; font-size: 12px; color: var(--muted); }
.legend .key { display: inline-flex; align-items: center; gap: 8px; }
.legend .key::before { content: ''; width: 26px; height: 14px; border-radius: 3px; background: #fff; border: 2px solid var(--t-green); }
.legend .key.dashed::before { border-style: dashed; border-color: var(--t-red); }

.pedigree { overflow-x: auto; padding: 8px 12px 14px; }
@media (pointer: fine) {
  .pedigree { cursor: grab; user-select: none; }
  .pedigree.grabbing, .pedigree.grabbing .pcard { cursor: grabbing; }
}
.pnode { display: flex; align-items: center; width: max-content; }
.parents { position: relative; display: flex; flex-direction: column; margin-left: 30px; }
.parents::before { content: ''; position: absolute; left: -30px; top: 50%; width: 15px; border-top: 2px solid var(--t-green); }
.parents > .pnode { position: relative; padding: 4px 0; }
.parents > .pnode::before { content: ''; position: absolute; left: -15px; top: 50%; width: 15px; border-top: 2px solid var(--t-green); }
.parents > .pnode::after { content: ''; position: absolute; left: -15px; top: 0; bottom: 0; border-left: 2px solid var(--t-green); }
.parents > .pnode:first-child::after { top: 50%; }
.parents > .pnode:last-child::after { bottom: 50%; }
.parents > .pnode:only-child::after { display: none; }

.pcard {
  display: flex; flex-direction: column; gap: 2px;
  width: 182px; padding: 8px 10px;
  text-align: left; font: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--t-green); border-radius: 5px;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pcard:hover, .pcard:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(40,12,8,.18); border-color: var(--t-red); outline: none; }
.pcard.probable { border-style: dashed; border-color: var(--t-red); background: #fffaf3; }
.pname { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.15; }
.pyears { font-size: 11px; letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.prole { font-size: 12px; line-height: 1.25; color: var(--muted); }

.panelback { position: fixed; inset: 0; z-index: 20; background: rgba(20,8,6,.62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--paper); border-radius: 6px; border-top: 6px solid var(--t-red); padding: 26px 28px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: left; }
.panel h2 { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; margin: 0 34px 4px 0; text-align: left; }
.panel .sub { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel .flag { margin: 0 0 12px; padding: 7px 10px; font-size: 13px; border: 1px dashed var(--t-red); border-radius: 4px; background: #fffaf3; }
.panel .facts { margin: 0; padding-left: 18px; }
.panel .facts li { font-size: 15px; line-height: 1.55; margin-bottom: 7px; }
.panel .theory { margin: 12px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; background: rgba(28,74,42,.08); border-radius: 4px; }
.panel .rel { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.7; }
.panel .rel a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.panel h3 { margin: 14px 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.panel .srcs { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.panel .records { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.panel .records a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.panel .family li { font-size: 14px; }
.panel .srcs a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 2px; white-space: nowrap; }
.panel .srcnote { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.panel .proof { padding-left: 22px; }
.panel .proof li { font-size: 14px; line-height: 1.5; }
.panel .proof-intro { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.panel .proof-verdict { margin: 4px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; background: rgba(28,74,42,.08); border-radius: 4px; }
.panel .close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; font-size: 26px; line-height: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.panel .close:hover, .panel .close:focus-visible { background: rgba(28,74,42,.1); color: var(--ink); outline: none; }

/* ---------- enskild.millar.se: the same tree, for the separate property ---------- */

.enskild .pcard.outside { border-color: #b9b3a6; background: #f1ede4; color: var(--muted); }
.enskild .pcard.outside .pname { color: #4a4f5a; }
.legend .key.outside::before { border-color: #b9b3a6; background: #f1ede4; }
.enskild .panel .flag.outside { border-style: solid; border-color: #b9b3a6; background: #f1ede4; }
.enskild .subhead { margin: 22px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: center; }
.enskild .stays.law { max-width: 760px; }
.enskild .stays.law li { grid-template-columns: 10em 1fr; }
.enskild .stays .where .doc { font-weight: 400; font-size: 14px; color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; white-space: nowrap; }
.enskild .card:not(.wide) .stays { max-width: 560px; }
.enskild .ledgerwrap { overflow-x: auto; margin: 0 0 6px; }
.enskild table.ledger { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.enskild table.ledger th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; border-bottom: 2px solid var(--t-green); vertical-align: bottom; }
.enskild table.ledger td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.enskild table.ledger td.num { text-align: right; white-space: nowrap; }
.enskild table.ledger tr:last-child td { border-bottom: 0; }
.enskild .tablenote { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.enskild .plainlist { margin: 0 auto; max-width: 62ch; padding-left: 22px; text-align: left; }
.enskild .plainlist li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
.enskild .doclist { margin: 0 auto; max-width: 70ch; text-align: left; font-size: 14px; line-height: 1.6; padding-left: 20px; }
.enskild .doclist a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.enskild .aside { margin: 22px auto 0; max-width: 60ch; padding-top: 18px; border-top: 1px solid var(--rule); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; text-align: center; color: var(--muted); }

/* ---------- the name: history card under the tree ---------- */

.history { text-align: left; padding-top: 32px; }

.history h2 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 18px;
  text-align: center;
}

.history h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--t-red);
}

.history .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.history p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; }

.history .aside {
  margin: 16px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}
.history .aside { margin-left: auto; margin-right: auto; max-width: 60ch; }

.history .sources { margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- personal page ---------- */

.bornline { margin: 8px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 18px;
  margin: 24px auto 0;
  max-width: 400px;
  text-align: left;
  border-top: 1px solid var(--rule);
}
.details dt, .details dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.details dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 12px; }
.details dd { overflow-wrap: anywhere; }
.details a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.details a:hover { color: var(--t-red); }

.places { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); text-align: left; }
.places h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0 0 18px; text-align: center; }
/* a plain list: the years in their own column, the place, and a note under it */
.stays { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; border-top: 1px solid var(--rule); }
.stays li { display: grid; grid-template-columns: 6.2em 1fr; gap: 0 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.stays .when { font-size: 14px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.stays .where { font-size: 15px; line-height: 1.45; font-weight: 600; }
.stays .note { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }

.own { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.button {
  display: inline-block;
  padding: 11px 20px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--t-white);
  background: var(--t-green);
  border-radius: 4px;
  transition: background-color .15s ease;
}
.button:hover, .button:focus-visible { background: var(--t-red); outline: none; }

.contact { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.contact a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.profile .card:has(.gallery) { max-width: 760px; }


.profile .avatar { --size: 168px; margin: -124px auto 20px; }
.profile .card { margin-top: 84px; max-width: 560px; }
.profile h1 { font-size: clamp(44px, 10vw, 76px); }
.profile .surname { color: var(--muted); font-weight: 400; }

.profile .line {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  color: var(--muted);
}

.profile .empty {
  margin: 28px auto 0;
  max-width: 38ch;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.home {
  display: inline-block;
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--t-red);
  padding-bottom: 2px;
}

.home:hover { border-color: var(--t-green); }

/* ---------- a photographer's page: the old millar.se look ---------- */

body.dark { background: #000; color: #d8d8d8; }
body.dark .sky { display: none; }

.portfolio { justify-content: flex-start; gap: 0; padding: 32px 16px 40px; }
.portfolio > * { width: 100%; max-width: 960px; }

.plate {
  background: linear-gradient(#2e2e2e 0, #2e2e2e 34%, #000 34%);
  border: 3px solid #e9e9e9;
  padding: 14px 18px 46px;
  overflow: hidden;
}

.wordmark {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(44px, 9vw, 84px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #f2f2f2;
  -webkit-box-reflect: below -0.12em linear-gradient(transparent 35%, rgba(255,255,255,.28));
}
.wordmark span { font-size: .78em; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0; }
.tabs button {
  flex: 1 1 110px;
  font: 300 14px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cfcfcf;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  padding: 12px 8px;
  cursor: pointer;
}
.tabs button:hover, .tabs button:focus-visible { background: #2a2a2a; color: #fff; outline: none; }
.tabs button.on { background: #e9e9e9; color: #000; border-color: #e9e9e9; }

.stage { border: 3px solid #e9e9e9; background: #000; min-height: 200px; }
.herowrap { overflow: hidden; }
.stage .hero { display: block; width: 107.4%; max-width: none; height: auto; margin: -26.4% 0 -3.8% -2.9%; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; padding: 6px; }
.shots.wide { grid-template-columns: 1fr; }
.shots a { display: block; background: #111; }
.shots img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .2s; }
.shots.wide img { aspect-ratio: auto; }
.shots a:hover img { opacity: .82; }

.lightbox {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0,0,0,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); border: 3px solid #e9e9e9; }
.lightbox p { margin: 12px 0 0; font: 300 13px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #bbb; }

.credit { margin-top: 18px; text-align: center; font-size: 12px; letter-spacing: .03em; color: #8a8a8a; }
.credit a { color: #cfcfcf; }

/* ---------- language switch ---------- */

.langswitch {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 5;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--t-white);
  text-decoration: none;
  border: 1px solid rgba(243, 234, 219, .35);
  border-radius: 4px;
}
.langswitch:hover, .langswitch:focus-visible { border-color: var(--t-white); outline: none; }
body.dark .langswitch { color: #cfcfcf; border-color: #3a3a3a; }

/* ---------- a page of remembrance ---------- */

.story { margin: 26px auto 0; max-width: 60ch; text-align: left; }
.story p { font-size: 16px; line-height: 1.65; margin: 0 0 12px; }
.memorial .avatar { --c: #4d6b7d; }
.memorial .bornline { letter-spacing: .04em; text-transform: none; font-size: 15px; }
.memorial .details { display: none; }
.places .onmap { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }

/* ---------- the map page ---------- */

.mappage, .familypage { justify-content: flex-start; }
.mappage h1, .familypage h1 { color: var(--t-white); text-shadow: 0 3px 24px rgba(0,0,0,.55); font-size: clamp(44px, 9vw, 84px); }
.mappage .foot, .familypage .foot { margin: 0; text-align: center; }

.maptabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 16px; }
.maptabs button {
  font: inherit; font-size: 14px;
  padding: 8px 14px;
  color: var(--ink); background: transparent;
  border: 1px solid var(--rule); border-radius: 4px;
  cursor: pointer;
}
.maptabs button:hover, .maptabs button:focus-visible { border-color: var(--t-green); outline: none; }
.maptabs button.on { color: var(--t-white); background: var(--t-green); border-color: var(--t-green); }

.mapstage > svg { display: block; width: 100%; height: auto; max-height: 72vh; margin: 0 auto; border-radius: 4px; }
.mapstage .sea { fill: #dfe6e4; }
.mapstage .land { fill: #efe7d6; stroke: #b9ad94; stroke-width: 1; stroke-linejoin: round; }
.pin { cursor: pointer; outline: none; }
.pin circle { fill: var(--t-red); stroke: var(--paper); stroke-width: 3; }
.pin.cluster circle { fill: var(--t-green); }
.pin .num { fill: #fff; font: 600 13px var(--sans); pointer-events: none; }
.pin .label { fill: var(--ink); font: 600 17px var(--serif); paint-order: stroke; stroke: #efe7d6; stroke-width: 5px; stroke-linejoin: round; }
.pin:hover circle, .pin:focus-visible circle { stroke: var(--ink); }

.maplist { list-style: none; margin: 18px auto 0; padding: 0; max-width: 640px; border-top: 1px solid var(--rule); text-align: left; }
.maplist li { padding: 10px 8px; border-bottom: 1px solid var(--rule); border-radius: 4px; }
.maplist li.on { background: rgba(196, 33, 27, .07); }
.maplist .where { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.maplist .n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--t-red); color: #fff; font: 600 12px var(--sans); vertical-align: 2px; }
.maplist .who, .maplist .past { margin: 0 0 3px 32px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.maplist .past { color: var(--ink); }
.maplist .who a { color: var(--ink); font-weight: 600; text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.maplink { margin: 4px 0 2px 32px; padding: 0; font: inherit; font-size: 14px; color: var(--ink); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--t-red); text-underline-offset: 3px; cursor: pointer; }
.mapcard .hint { text-align: center; }

/* ---------- the family's own page ---------- */

.familypage .card { text-align: left; }
.familypage .card h2 { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 12px; text-align: center; }
.familypage .lede { margin: 0 auto 18px; max-width: 60ch; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; }
.familypage .stays { max-width: 520px; }
.familypage .stays li { grid-template-columns: 7.5em 1fr; }
.familypage .records a { color: var(--ink); text-decoration-color: var(--t-red); text-underline-offset: 3px; }
.familypage .decade { font-family: var(--serif); font-size: 22px; margin: 22px 0 8px; }
.album { margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.album figure { margin: 0; }
.album figcaption { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* ---------- wandered off ---------- */

.lost .card { max-width: 520px; }
.lost h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.05; }
.lost p { color: var(--muted); line-height: 1.55; margin: 18px auto 0; max-width: 36ch; }
.lost .sheep { font-size: 56px; line-height: 1; margin-bottom: 12px; }

/* ---------- no script ---------- */

.plain { color: var(--t-white); text-align: center; }

@media (max-width: 480px) {
  .card { padding: 28px 12px 24px; }
  .tree { --node: 62px; --avatar: 48px; --drop: 20px; }
  .person { padding: 6px 0 8px; gap: 6px; }
  .person .name { font-size: 14px; }
  .person .born { font-size: 11px; letter-spacing: .04em; margin-top: -3px; }
  .person .host { display: none; }   /* no room at 62px a head; it is on the personal page */
  .tree > ul > li.has-partner { padding-left: 0; padding-right: 0; }   /* the children below are wider than the couple: no room needs keeping */
  .history .cols { grid-template-columns: 1fr; gap: 8px; }
  .history { padding-left: 20px; padding-right: 20px; }
  .lineage { padding-left: 18px; padding-right: 18px; }
  .card.wide { padding: 24px 12px 18px; }
  .pcard { width: 150px; padding: 6px 8px; }
  .pname { font-size: 14px; }
  .parents { margin-left: 22px; }
  .parents::before { left: -22px; width: 11px; }
  .parents > .pnode::before, .parents > .pnode::after { left: -11px; }
  .parents > .pnode::before { width: 11px; }
  .panel { padding: 22px 18px 18px; }
  .line h3 { font-size: 18px; }
  .profile .avatar { --size: 136px; margin-top: -96px; }
  .pin .label { font-size: 22px; }
  .langswitch { top: 10px; right: 10px; }
}
.familypage .card > .hint { text-align: center; }
.familypage .card > .home { display: table; margin: 28px auto 0; }

/* the name at the top of the inner pages leads home */
.hometitle { color: inherit; text-decoration: none; }
.hometitle:hover, .hometitle:focus-visible { text-decoration: underline; text-decoration-color: var(--t-red); text-decoration-thickness: 3px; text-underline-offset: 10px; outline: none; }

/* ---------- a town, street by street (OpenStreetMap through Leaflet) ---------- */

.townhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.townhead h3 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.townhead .maplink { margin: 0; }
.streetmap { height: min(68vh, 560px); border-radius: 4px; border: 1px solid var(--rule); background: #dfe6e4; }
.streetmap .leaflet-tile-pane { filter: saturate(.55) sepia(.12); }
.streetmap .leaflet-control-attribution { font-size: 11px; }
.leaflet-marker-icon.streetpin { box-sizing: border-box; text-align: center; line-height: 20px; border-radius: 50%; background: var(--t-red); border: 3px solid var(--paper); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-marker-icon.streetpin span { color: #fff; font: 600 12px var(--sans); }
.leaflet-marker-icon.streetpin.approx { background: #8a6d3b; }
.pin.town circle { stroke: var(--t-red); stroke-width: 2px; }
.pin.town .num { fill: #fff; }

/* the tree page: jump to either side of the family */
.sides { margin-top: -8px; }
.sides .button { background: rgba(28, 74, 42, .85); }
#ian, #carin { scroll-margin-top: 16px; }

/* outline maps: wheel zoom, drag to pan when zoomed in */
@media (pointer: fine) {
  .mappage svg.zoomed { cursor: grab; }
  .mappage svg.grabbing { cursor: grabbing; }
}

/* Where we come from: one heading per side */
.lineage h3.side { margin: 26px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: center; font-family: inherit; }