:root {
    --fg: #1a1a1a;
    --bg: #fff;
    --muted: #666;
    --border: #e2e2e2;
    --link: #0b57d0;
    --measure: 40rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg);
}

a {
    color: var(--link);
}

/* Narrow centered column shared by main and footer */
main,
.site-footer {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

main {
    flex: 1;
    padding-block: 2rem 3rem;
}

/* Landing page: logo and contact link centered in the viewport */
main.landing {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.landing img {
    display: block;
    width: min(384px, 100%);
    height: auto;
}

/* Logo is centered on its own; contact info hangs below it, so revealing
   it never moves the logo. Space for the contact row is reserved up front. */
.landing-stack {
    position: relative;
    width: min(384px, 100%);
}

.contact {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5rem;
    display: grid;
    justify-items: center;
    white-space: nowrap;
}

/* Label and details share one grid cell: the label is replaced in place */
.contact > * {
    grid-area: 1 / 1;
}

.contact > .contact-link {
    align-self: start;
}

/* Email and QR code side by side, hidden until the label is clicked */
.contact-details {
    display: flex;
    align-items: center;
    gap: 1rem;
    visibility: hidden;
}

.contact-details.revealed {
    visibility: visible;
}

.contact.revealed > .contact-link {
    visibility: hidden;
}

/* Fixed width: the revealed address does not shift the QR code */
.contact-email {
    width: 12.5rem;
    text-align: right;
}

.signal-qr {
    display: block;
    width: 8rem;
    height: 8rem;
}

.landing .signal-qr img {
    width: 100%;
}

.contact-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--muted);
}

.contact-link:hover {
    border-bottom-color: var(--fg);
}

/* Text */
h1,
h2,
h3,
h4 {
    line-height: 1.25;
    hyphens: auto;
    overflow-wrap: break-word;
}

h1 {
    margin: 0 0 1.5rem;
    font-size: 2rem;
}

h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.4rem;
}

h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.1rem;
}

h4 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
}

p,
ul {
    margin: 0 0 1rem;
}

ul {
    padding-left: 1.25rem;
}

li + li {
    margin-top: 0.5rem;
}

p,
li {
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Revealed contact links look like plain text until clicked */
a[data-email],
a[data-phone],
a[data-value] {
    color: inherit;
    text-decoration: none;
}

/* Footer */
.site-footer {
    padding-block: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.site-footer .legal {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.site-footer .legal a {
    color: inherit;
    text-decoration: none;
}

.site-footer .legal a:hover {
    text-decoration: underline;
}

.site-footer .legal a + a::before {
    content: "\00b7";
    margin-right: 0.5rem;
    color: var(--muted);
    display: inline-block;
    text-decoration: none;
}

.site-footer p {
    margin: 0.5rem 0 0;
}

a[data-value] span {
    white-space: pre-line;
}