/* lighthouse.nyc — a plain, Notion-like page. Accent = the logo green, used sparingly. */
:root {
  --text: rgb(55, 53, 47);
  --muted: rgba(55, 53, 47, 0.65);
  --faint: rgba(55, 53, 47, 0.45);
  --line: rgba(55, 53, 47, 0.09);
  --hover: rgba(55, 53, 47, 0.06);
  --bg: #ffffff;
  --green: #6F9C6D;
  --green-dark: #557d54;
  --blue-bg: rgb(231, 243, 248);
  --green-bg: rgb(237, 243, 236);
  --tag-default: rgba(206, 205, 202, 0.5);
  --tag-gray: rgb(227, 226, 224);
  --tag-yellow: rgb(253, 236, 200);
  --tag-yellow-text: rgb(64, 44, 27);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica,
    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: underline; text-decoration-color: rgba(55, 53, 47, 0.4); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--green); color: var(--green-dark); }
img, video { display: block; max-width: 100%; height: auto; }

/* top bar with breadcrumbs, like a published Notion page */
.topbar {
  position: sticky; top: 0; z-index: 20; height: 45px; display: flex; align-items: center; padding: 0 12px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.crumbs { display: flex; align-items: center; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; }
.crumb { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 4px; text-decoration: none; min-width: 0; }
.crumb span { overflow: hidden; text-overflow: ellipsis; }
.crumb:hover { background: var(--hover); color: inherit; }
.crumb img { width: 18px; height: 18px; flex: none; }
.crumb.current { color: var(--text); }
.sep { color: var(--faint); margin: 0 1px; }

/* cover + page column */
.cover { height: 30vh; max-height: 280px; min-height: 160px; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; max-width: none; }
.page { max-width: 900px; margin: 0 auto; padding: 0 96px 30vh; }
.page-icon { font-size: 78px; line-height: 1.1; height: 86px; width: 86px; margin: -42px 0 4px -4px; position: relative; z-index: 2; }
.page.no-cover { padding-top: 56px; }
.page.no-cover .page-icon { margin-top: 12px; }
.page-title { font-size: 40px; line-height: 1.2; font-weight: 700; margin: 4px 0 16px; letter-spacing: -0.01em; }
.back { display: inline-block; font-size: 14px; color: var(--muted); text-decoration: none; padding: 2px 6px; margin-left: -6px; border-radius: 4px; }
.back:hover { background: var(--hover); color: var(--text); }

/* blocks */
.page-content > *, .column > * { margin-top: 2px; margin-bottom: 1px; }
.block { padding: 3px 2px; margin: 1px 0; white-space: pre-wrap; word-wrap: break-word; }
p.block { margin: 0; padding: 5px 2px; }
.empty-block { min-height: 30px; padding: 0; }
.page-content h1, .page-content h2, .page-content h3 { font-weight: 600; line-height: 1.3; padding: 3px 2px; margin-bottom: 1px; }
.page-content h1 { font-size: 1.875em; margin-top: 2.1em; }
.page-content h2 { font-size: 1.5em; margin-top: 1.6em; }
.page-content h3 { font-size: 1.25em; margin-top: 1.6em; margin-bottom: 4px; }
ul.block { padding-left: 1.7em; white-space: normal; margin: 1px 0; }
ul.block li { padding: 4px 0; }
ul.block li::marker { font-size: 1.1em; }
strong { font-weight: 600; }

.callout { display: flex; gap: 8px; padding: 16px 16px 16px 12px; border-radius: 4px; margin: 8px 0; }
.callout.blue_bg { background: var(--blue-bg); }
.callout.green_bg { background: var(--green-bg); }
.callout-icon { font-size: 21.6px; line-height: 1.1; width: 24px; flex: none; text-align: center; }
.callout-body { min-width: 0; padding-left: 6px; white-space: pre-wrap; word-wrap: break-word; }

/* media */
figure { margin: 0; padding: 6px 0; }
figure.image > a { display: block; text-decoration: none; }
figure.image img { width: 100%; border-radius: 2px; }
figure.video video { width: 100%; background: #f1f1ef; border-radius: 2px; aspect-ratio: 16 / 9; object-fit: contain; }
figcaption { font-size: 14px; line-height: 1.4; color: var(--muted); padding: 6px 2px 2px; white-space: pre-wrap; word-wrap: break-word; }
.mention { text-decoration: none; border-bottom: 0.05em solid rgba(55, 53, 47, 0.25); white-space: nowrap; font-weight: 500; color: var(--text); }
.mention:hover { background: var(--hover); border-bottom-color: var(--green); color: var(--text); }
.mention-icon { margin-right: 2px; }
.mention-text { white-space: normal; }

.columns { display: flex; gap: 46px; align-items: flex-start; margin: 2px 0; }
.column { flex: 1 1 0; min-width: 0; }
.columns.cols-3 { gap: 32px; }

/* inline database, gallery view */
.collection { margin: 10px 0 4px; scroll-margin-top: 56px; }
.collection-title { font-size: 1.25em; font-weight: 600; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: block; text-decoration: none; color: var(--text); border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.08) 0 2px 4px; transition: background .12s;
}
.card:hover { background: rgba(55, 53, 47, 0.03); color: var(--text); }
.card-cover { height: 190px; border-bottom: 1px solid var(--line); overflow: hidden; background: #f7f6f3; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 8px 10px 10px; }
.card-title { font-size: 14px; font-weight: 500; line-height: 1.5; margin-bottom: 4px; }
.card-icon { margin-right: 6px; }
.card-prop { margin-top: 4px; }

.tag { display: inline-block; font-size: 12px; line-height: 20px; height: 20px; padding: 0 6px; border-radius: 3px; white-space: nowrap; }
.tag-default { background: var(--tag-default); }
.tag-gray { background: var(--tag-gray); color: rgb(50, 48, 44); }
.tag-yellow { background: var(--tag-yellow); color: var(--tag-yellow-text); }
.empty { color: var(--faint); font-size: 14px; }

/* page properties (room pages) */
.props { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.prop { display: flex; align-items: center; min-height: 34px; font-size: 14px; }
.prop-name { width: 160px; flex: none; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.prop-ico { font-size: 12px; width: 14px; text-align: center; opacity: .8; }

@media (max-width: 720px) {
  .page { padding: 0 16px 30vh; }
  .page-icon { font-size: 64px; height: 72px; width: 72px; margin-top: -36px; }
  .page.no-cover { padding-top: 24px; }
  .page-title { font-size: 32px; }
  .columns { display: block; }
  .column + .column { margin-top: 2px; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-cover { height: 130px; }
  .prop-name { width: 120px; }
}
@media (max-width: 360px) { .gallery { grid-template-columns: 1fr; } }