/* Gabylin Studio — public site. One system for every page: same header,
   same page spacing, one label style, one button style. Colors are the
   brand's (brand/README.md); grays below that carry text are the darkest
   that still read as gray, so small text passes contrast. */

/* Oswald (SIL Open Font License), served from this site instead of Google
   Fonts: one less site to connect to before text shows (audit 2026-11-10
   M-11). One variable file, latin subset, covers weights 400-700. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/oswald-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ink: #000000;
    --text: #222222;
    --muted: #555555;
    --label: #767676;      /* smallest gray that passes 4.5:1 on white */
    --line: #e6e6e6;
    --brand-gray: #C7C7C7;
    --blue: #4a90e2;
    --blue-dark: #357abd;
}

/* ---- Base ----
   What the pages used to get from Bootstrap's reset, which is no longer
   loaded (audit H-06, 2026-10-28): only the rules these pages rely on. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }
p, ul, ol, dl { margin-top: 0; margin-bottom: 1rem; }
dt { font-weight: 700; }
dd { margin-bottom: 0.5rem; margin-left: 0; }
img, svg { vertical-align: middle; }
table { border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button { border-radius: 0; text-transform: none; }
button:not(:disabled) { cursor: pointer; }

/* Read by screen readers and search engines, not shown. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.error-text { color: #b3261e; }

body {
    margin: 0;
    line-height: 1.5;
    background: #ffffff;
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: var(--blue); }

/* ---- Accessibility ---- */

.skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 2000;
    background: var(--ink);
    color: #ffffff;
    padding: 10px 18px;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 0; color: #ffffff; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ---- Header: logo + menu ---- */

.site-logo {
    display: flex;
    justify-content: center;
    padding: 44px 20px 28px;   /* Acuity's 95 px read as empty space here: no Sign up/Login row (Nick, 2026-11-10) */
}
/* Size and place of the lettering on her Acuity page (gabylinstudio.as.me),
   Nick 2026-11-10. Desktop: about 196 x 43 px, centered (its spacing
   from the top kept ours). Acuity's image has white margins, ours doesn't, so 198 px wide
   here = the same visible size. Phones: see the max-width 767.98px rule. */
.site-logo img {
    display: block;
    width: 198px;
    max-width: 100%;
    height: auto;
}

.site-nav {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
}
.site-nav a {
    position: relative;
    display: inline-block;
    padding: 4px 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--blue);
    transition: right 0.18s ease;
}
.site-nav a:hover,
.site-nav a:active,
.site-nav a.active { color: var(--blue); }   /* Book too: blue only on hover (Nick, 2026-10-28) */
.site-nav a:hover::after,
.site-nav a.active::after { right: 0; }

.menu-toggle,
.menu-close { display: none; }

/* Phone menu: the original look — hamburger on the left opens a dark panel
   that slides in from the left (Nick, 2026-10-26). The button sits in the
   page under the logo rather than floating over the content. */
@media (max-width: 991.98px) {
    .site-logo { padding: 32px 16px 12px; }

    .site-nav { border: 0; padding: 0 12px; }
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        cursor: pointer;
    }
    .menu-toggle-icon {
        display: block;
        width: 24px;
        height: 24px;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / contain no-repeat;
    }

    .site-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 70%;
        max-width: 320px;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #111111;   /* solid: at 90% the logo and photo showed through (Nick, 2026-11-10) */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    }
    .site-menu.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s ease-in-out;
        /* Dims the rest of the page instead of a hard black/white edge;
           a tap there closes the menu (assets/js/site.js). */
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
    }
    .menu-close {
        display: block;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: #ffffff;
        font-family: Arial, sans-serif;
        font-size: 2.25rem;
        line-height: 1;
        cursor: pointer;
    }
    .menu-close:hover { color: var(--blue); }

    .site-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 20px;
    }
    .site-nav li { margin: 10px 0; text-align: center; }
    .site-nav a {
        font-size: 1.5rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: #ffffff;
    }
    .site-nav a::after { display: none; }
    .site-nav a:hover,
    .site-nav a.active,
    .site-nav a.nav-book { color: var(--blue); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .site-menu, .site-menu.open { transition: none; }
}

/* ---- Page frame ---- */

.page {
    margin: 0 auto;
    padding: 56px 24px 72px;
    max-width: 960px;
}
.page-narrow { max-width: 728px; }  /* reading pages and the gallery: 680px of content */

.page-title {
    margin: 0 0 36px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--label);
}

@media (max-width: 767.98px) {
    .page { padding: 36px 16px 56px; }
    .page-title { font-size: 1.35rem; margin-bottom: 28px; }
}

/* ---- Buttons ---- */

.button {
    display: inline-block;
    padding: 15px 32px;
    border-radius: 2px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #ffffff;
    background: var(--blue);
    transition: background-color 0.15s ease;
}
.button:hover { color: #ffffff; background: var(--blue-dark); }
.button-dark { background: var(--ink); }
.button-dark:hover { background: #333333; }

/* "Book an Appointment" at the end of the price list and FAQ:
   phones only, where the menu's booking link is behind the ☰ button. */
.book-cta { display: none; }
@media (max-width: 991.98px) {
    .book-cta { display: block; margin: 40px 0 0; }
    .book-cta .button { display: block; width: 100%; }
}

/* ---- Home ---- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 420px);
    justify-content: center;
    align-items: start;
    gap: 72px;
}
.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}
.hero-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}
.bio { width: 100%; margin: 0; }
.bio-item {
    padding: 0 0 16px;
    margin: 0 0 18px;
    border-bottom: 1px solid var(--line);
}
.bio-item:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.bio dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
}

/* Phones: on an iPhone her Acuity page stretches the logo across the
   screen, 16 px from each edge (Nick, 2026-11-10); spacing from the top
   stays ours (32 px, above). Its image is 78.5% lettering, ours 99%. */
@media (max-width: 767.98px) {
    .site-logo img { width: calc((100vw - 32px) * 0.794); }
}

@media (max-width: 767.98px) {
    .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .hero-image img { width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; }
    .hero-info .button { width: 100%; }
}

/* ---- Pricelist ---- */

.price-table {
    width: 100%;
    border-collapse: collapse;
}
.price-table th,
.price-table td {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: baseline;
}
.price-table thead th {
    padding-top: 0;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--label);
}
.price-table tbody th {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink);
    padding-right: 16px;
}
.price-table .price {
    width: 22%;
    text-align: right;
    font-size: 0.95rem;
    color: var(--muted);
    white-space: nowrap;
}
.price-table thead .price { color: var(--label); font-size: 0.72rem; }
.price-table .price-group th {
    padding-top: 36px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--label);
}

.price-notes { margin-top: 32px; }
.price-notes p {
    margin: 0 0 22px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text);
}

/* ---- Reading pages (aftercare, FAQ) ---- */

.info-section { margin-bottom: 26px; }
.info-section p,
.faq-item p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
}
.faq-item { margin-bottom: 30px; }
.faq-item h2 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--label); /* the site's heading gray (Nick, 2026-10-28) */
}

.page-404 { text-align: center; }
.page-404 p { font-size: 0.95rem; line-height: 1.6; margin: 0 0 32px; }

/* ---- Gallery ---- */

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.gallery-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 2px;
    overflow: hidden;
    background: #f3f3f3;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.gallery-link:hover { box-shadow: 0 0 0 4px var(--brand-gray); }
.gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.load-status {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88px;
    font-size: 0.9rem;
    color: var(--muted);
}
.spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--line);
    border-top-color: #9a9a9a;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

@media (max-width: 767.98px) {
    .gallery { gap: 10px; }
}

/* Lightbox: a native <dialog> (assets/js/site.js), as wide as the photo
   shown whole: up to 800px, never taller than the screen. */
.lightbox {
    --lightbox-gap: 1rem;
    width: fit-content;
    max-width: min(800px, calc(100% - var(--lightbox-gap)));
    max-height: calc(100% - var(--lightbox-gap));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 2px;
    overflow: auto;
    background: #000000;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.5); }
@media (min-width: 576px) {
    .lightbox { --lightbox-gap: 3.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: lightbox-in 0.15s ease-out; }
    @keyframes lightbox-in { from { opacity: 0; transform: translateY(-12px); } }
}
#modalImage {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - var(--lightbox-gap));
    max-height: calc(100dvh - var(--lightbox-gap));
    user-select: none;
    -webkit-user-drag: none;
}
.modal-image-overlay { position: absolute; inset: 0; z-index: 1; }
.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707A1 1 0 01.293.293z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.lightbox-close:hover { background-color: rgba(0, 0, 0, 0.9); }

/* ---- Footer ---- */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 32px 20px 40px;
    text-align: center;
}
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 10px; }
.site-footer a {
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.site-footer a:hover { color: var(--blue); text-decoration: underline; }
.footer-sep { color: var(--brand-gray); margin: 0 10px; }
.footer-legal {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--label);
}
.footer-legal a { font-size: inherit; color: inherit; }