/* Shared by every page (index.html keeps its own inline styles and
inner pages load page.css; this file only holds what all of them need). */
/* Skip link: off-screen until focused by keyboard. */
.skip-link {
position: absolute;
left: 1rem;
top: -100px;
z-index: 2000;
padding: 10px 18px;
background: #1C1914;
color: #F0EDE4;
border-radius: 100px;
font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
}
.skip-link:focus {
top: 0.75rem;
}
:focus-visible {
outline: 2px solid #8A6A45;
outline-offset: 3px;
}
main:focus {
outline: none;
}
/* The heading of a section that is labelled for assistive tech only. */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Scroll reveal. Content is hidden only when JavaScript is running
(html.js is set by an inline script in ), so it stays visible
with JavaScript off. If site.js never starts (html.reveal-on is never
set), a failsafe reveals everything after two seconds. */
html.js .reveal:not(.visible) {
opacity: 0;
transform: translateY(40px);
}
html.js:not(.reveal-on) .reveal {
animation: reveal-failsafe 0s linear 2s forwards;
}
@keyframes reveal-failsafe {
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html.js .reveal:not(.visible) { opacity: 1; transform: none; }
.reveal { transition: none !important; }
}
/* Mobile menu: the button toggles .is-open on the nav (see site.js). */
@media (max-width: 768px) {
.nav.is-open .nav-links {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - 64px);
overflow-y: auto;
background: rgba(250, 248, 243, 0.98);
padding: 1rem 2rem 2rem;
border-bottom: 1px solid rgba(28, 25, 20, 0.12);
gap: 1.25rem;
}
.nav.is-open .nav-links a {
font-size: 0.95rem;
}
}
.mobile-menu-btn {
min-width: 44px;
min-height: 44px;
line-height: 1;
}
/* Android notice (built by site.js when an Android visitor taps an
App Store link). */
#android-modal-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#android-modal-overlay.visible {
opacity: 1;
visibility: visible;
}
#android-modal {
background: #FFFFFF;
border: 1px solid rgba(28, 25, 20, 0.12);
border-radius: 18px;
padding: 2.5rem 2rem;
max-width: 380px;
width: 90%;
text-align: center;
transform: scale(0.92);
transition: transform 0.3s ease;
}
#android-modal-overlay.visible #android-modal {
transform: scale(1);
}
#android-modal h3 {
font-family: 'Newsreader', Georgia, serif;
font-size: 1.35rem;
font-weight: 600;
color: #1C1914;
margin-bottom: 0.75rem;
}
#android-modal p {
font-size: 0.95rem;
color: #6E675C;
line-height: 1.6;
margin-bottom: 0.5rem;
}
#android-modal .android-modal-hint {
font-size: 0.85rem;
color: #8B8375;
margin-top: 0.5rem;
}
#android-modal .android-modal-hint strong {
color: #8A6A45;
}
#android-modal-close {
margin-top: 1.5rem;
padding: 12px 40px;
background: #1C1914;
color: #F0EDE4;
font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
font-size: 0.95rem;
border: none;
border-radius: 100px;
cursor: pointer;
}