:root {
    --ink: #292b22;
    --muted-ink: #565746;
    --paper: #f1eadc;
    --paper-light: #fbf7ed;
    --paper-dark: #d1c1a2;
    --brick: #843e32;
    --green: #424b32;
    --focus: #366579;
    --rule: #55513e;
    --measure: 74rem;
}

* { box-sizing: border-box; }

html,
body { overflow-x: hidden; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    line-height: 1.6;
}

a { color: #424b32; text-underline-offset: .16em; }
a:hover { color: #843e32; }
a:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
a:focus:not(:focus-visible) { outline: none; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

img { max-width: 100%; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
    color: white;
    background: var(--green);
    transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.work-in-progress-banner {
    padding: .65rem 1rem;
    color: var(--paper-light);
    background: var(--brick);
    border-bottom: 3px double var(--paper-light);
    text-align: center;
    font-size: .95rem;
    line-height: 1.5;
}

.work-in-progress-banner p { margin: 0; }

.paper-frame {
    position: relative;
    width: calc(100% - 1rem);
    max-width: 100rem;
    margin: .5rem auto;
    border: 3px double var(--rule);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .14);
}

.paper-frame::before,
.paper-frame::after {
    position: absolute;
    z-index: 8;
    top: -.72rem;
    color: var(--rule);
    font-size: 1.45rem;
    line-height: 1;
    width: 1.45rem;
    height: 1.45rem;
    background: url("/assets/icons/ornament.svg") center / contain no-repeat;
    content: "";
    pointer-events: none;
}

.paper-frame::before { left: -.72rem; }
.paper-frame::after { right: -.72rem; }

.site-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--rule);
    text-align: center;
}

.wordmark {
    color: var(--ink);
    font-size: clamp(1.3rem, 5vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .035em;
    text-decoration: none;
    text-transform: uppercase;
}

.wordmark-small {
    display: block;
    font-size: .66em;
    letter-spacing: .11em;
}

.page-home .wordmark { display: none; }

.primary-nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: .16rem 2.15rem;
    border: 4px double var(--rule);
    background: rgba(241, 234, 220, .94);
    box-shadow: inset 0 0 0 2px rgba(57, 48, 38, .08);
}

.primary-nav::before,
.primary-nav::after {
    position: absolute;
    top: 50%;
    width: .42rem;
    height: .42rem;
    background: var(--rule);
    box-shadow: 0 0 0 2px rgba(241, 234, 220, .95), 0 0 0 3px var(--rule);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.primary-nav::before { left: .72rem; }
.primary-nav::after { right: .72rem; }

.primary-nav a {
    min-height: 2.9rem;
    padding: .65rem .85rem;
    color: var(--ink);
    border-right: 1px solid rgba(57, 48, 38, .6);
    font-weight: 700;
    text-shadow: 0 1px rgba(255, 247, 226, .9);
    text-decoration: none;
}

.primary-nav a:last-child { border-right: 0; }
.primary-nav a:nth-child(2) { border-right: 0; }
.primary-nav a:nth-child(-n + 2) { border-bottom: 1px solid rgba(57, 48, 38, .6); }
.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
    color: var(--ink);
    background: rgba(113, 61, 45, .1);
    box-shadow: inset 0 -2px var(--brick);
}

.masthead {
    position: relative;
    max-width: 58rem;
    margin: 0 auto;
    padding: 2.25rem 1rem 1.5rem;
    text-align: center;
}

.masthead::before {
    display: none;
}

.eyebrow,
.section-kicker {
    margin: 0 0 .5rem;
    color: var(--brick);
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.masthead h1 {
    margin: 0;
    font-size: clamp(2.25rem, 10vw, 5.6rem);
    line-height: .88;
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-shadow: 0 1px #fbf7ed, 0 0 .45rem rgba(241, 234, 220, .96);
}

.masthead h1 span { font-size: .72em; }

.doctor-line {
    display: flex;
    gap: .75rem;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 3.5vw, 1.45rem);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-layout { padding: 0 .75rem 1rem; }

.hero-art { margin: 0; }

.hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
    .hero-art img {
        -webkit-mask-image:
            linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
            linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
            linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
        mask-composite: intersect;
    }
}

.hero-side {
    display: grid;
    gap: .75rem;
    padding-top: 1rem;
}

.hero-side blockquote {
    position: relative;
    margin: 0;
    padding: 1.25rem;
    border: 5px double var(--rule);
    background: rgba(241, 234, 220, .86);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .1), 0 2px 5px rgba(33, 29, 24, .14);
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    font-style: italic;
    line-height: 1.05;
    text-align: center;
}

.hero-side blockquote::before,
.hero-side blockquote::after {
    position: absolute;
    left: 50%;
    width: 1.55rem;
    height: 1.55rem;
    box-sizing: border-box;
    background:
        linear-gradient(45deg, transparent 44%, var(--rule) 45% 55%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, var(--rule) 45% 55%, transparent 56%),
        linear-gradient(90deg, transparent 47%, var(--rule) 48% 52%, transparent 53%),
        linear-gradient(0deg, transparent 47%, var(--rule) 48% 52%, transparent 53%),
        var(--paper-light);
    border: 1px solid var(--rule);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.hero-side blockquote::before { top: -.92rem; }
.hero-side blockquote::after { bottom: -.92rem; }

.action-link,
.button {
    position: relative;
    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1rem;
    color: var(--ink);
    background: rgba(251, 247, 237, .58);
    border: 5px double var(--rule);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .08), 0 2px 4px rgba(33, 29, 24, .12);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.action-link::before,
.action-link::after {
    position: absolute;
    top: 50%;
    width: .36rem;
    height: .36rem;
    background: var(--muted-ink);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.action-link::before { left: .55rem; }
.action-link::after { right: .55rem; }

.action-link:hover {
    color: var(--ink);
    background: #e4d8be;
    border-color: var(--brick);
    box-shadow: inset 0 0 0 2px rgba(113, 61, 45, .18);
}

.button:hover { color: var(--paper-light); background: var(--green); }

.welcome-grid {
    position: relative;
    display: grid;
    gap: 1.5rem;
    width: calc(100% - 2rem);
    max-width: var(--measure);
    margin: 2.25rem auto;
    padding: 2rem 1.5rem 2.25rem;
    border-top: 4px double var(--rule);
    border-bottom: 4px double var(--rule);
    background: transparent;
}

.welcome-grid::before {
    display: none;
}

.welcome-grid h2,
.detail-card h2,
.interior-page h2 {
    margin: 0 0 .6rem;
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.15;
}

.welcome-grid > div { padding: .25rem; }

.information-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 3px double rgba(57, 48, 38, .72);
}

.welcome-grid > div > .information-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.information-section h2,
.notice-box h3 {
    margin: 0 0 .5rem;
    line-height: 1.2;
}

.notice-box h3 {
    margin-top: 1.35rem;
    color: var(--brick);
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.welcome-grid .section-kicker {
    display: flex;
    gap: .7rem;
    align-items: center;
}

.welcome-grid .section-kicker::after {
    width: min(9rem, 30%);
    height: 1px;
    background: var(--brick);
    content: "";
}

.welcome-grid p { max-width: 46rem; }

.welcome-grid > div > p:first-of-type::first-letter {
    float: left;
    margin: .08em .12em 0 0;
    color: var(--brick);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: .78;
}

.notice-box,
.wide-callout,
.safety-notice {
    padding: 1.25rem;
    border: 4px double var(--rule);
    background: rgba(241, 234, 220, .44);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .08), 0 2px 5px rgba(33, 29, 24, .1);
}

.notice-box { position: relative; }

.notice-box h2 {
    padding-bottom: .55rem;
    border-bottom: 3px double rgba(57, 48, 38, .7);
    text-align: center;
}

.notice-box::before,
.notice-box::after {
    position: absolute;
    width: .38rem;
    height: .38rem;
    background: var(--rule);
    content: "";
    transform: rotate(45deg);
}

.notice-box::before { top: .35rem; left: .4rem; }
.notice-box::after { right: .4rem; bottom: .35rem; }

.text-link { font-weight: 700; }

.contact-ribbon {
    position: relative;
    display: grid;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
    border: 5px double var(--rule);
    background: rgba(241, 234, 220, .88);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .08);
}

.contact-ribbon::before,
.contact-ribbon::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 1.85rem;
    height: 1.85rem;
    box-sizing: border-box;
    background:
        linear-gradient(45deg, transparent 45%, var(--rule) 46% 54%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--rule) 46% 54%, transparent 55%),
        linear-gradient(90deg, transparent 47%, var(--rule) 48% 52%, transparent 53%),
        linear-gradient(0deg, transparent 47%, var(--rule) 48% 52%, transparent 53%),
        rgba(241, 234, 220, .98);
    border: 3px double var(--rule);
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
}

.contact-ribbon::before { left: .25rem; }
.contact-ribbon::after { right: .25rem; }

.contact-ribbon p {
    display: flex;
    gap: .85rem;
    align-items: center;
    margin: 0;
    padding: .8rem 1rem;
    border-bottom: 1px solid rgba(57, 48, 38, .55);
}

.contact-ribbon p:last-child { border-bottom: 0; }
.ribbon-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.interior-page,
.error-page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.5rem 1rem 3.5rem;
}

.page-heading { max-width: 52rem; }

.page-heading h1,
.error-page h1,
.standalone-error h1 {
    margin: 0;
    font-size: clamp(2.5rem, 10vw, 5.4rem);
    line-height: .95;
}

.lead {
    max-width: 48rem;
    margin: 1rem 0 0;
    color: var(--muted-ink);
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    line-height: 1.45;
}

.ornament-rule {
    display: flex;
    gap: .8rem;
    align-items: center;
    margin: 2rem 0;
}

.profile-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.doctor-portrait {
    width: min(100%, 20rem);
    margin: 0 auto;
    padding: .65rem;
    border: 4px double var(--rule);
    background: rgba(241, 234, 220, .52);
    box-shadow: 0 3px 8px rgba(33, 29, 24, .15);
}

.doctor-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.profile-copy {
    font-size: clamp(1.08rem, 2vw, 1.25rem);
    line-height: 1.75;
}

.profile-copy p:first-child { margin-top: 0; }

.artwork-figure {
    max-width: 37.5rem;
    margin: 0;
    padding: .45rem;
    border: 4px double var(--rule);
    background: rgba(241, 234, 220, .42);
    box-shadow: 0 3px 8px rgba(33, 29, 24, .15);
}

.artwork-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.artwork-figure figcaption {
    padding: .55rem .35rem .15rem;
    font-size: .88rem;
    font-style: italic;
    text-align: center;
}

.visit-artwork {
    width: min(100%, 27rem);
    margin: 0 auto;
    order: 2;
}

.privacy-artwork {
    width: min(100%, 32rem);
    margin: 2rem auto 0;
    align-self: start;
}

.privacy-layout { display: grid; gap: 2rem; align-items: start; }
.privacy-copy { min-width: 0; }

.ornament-rule::before,
.ornament-rule::after {
    height: 1px;
    flex: 1;
    background: var(--rule);
    content: "";
}

.prose-columns { display: grid; gap: 1rem 3rem; }
.prose-columns section { max-width: 38rem; }
.wide-callout { margin-top: 2rem; }
.callout-title { margin: 0; font-size: 1.45rem; font-weight: 700; }

.button { width: 100%; margin-top: .5rem; }

.visit-layout {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-top: 2rem;
}

.visit-stack {
    display: grid;
    gap: 1.15rem;
    order: 1;
}

.detail-card {
    padding: 1.25rem;
    border-top: 4px double var(--rule);
    background: rgba(251, 247, 237, .32);
}

.card-symbol { margin: 0; font-size: 2rem; }
address { font-style: normal; }

.hours-list div,
.contact-list div {
    padding: .45rem 0;
    border-bottom: 1px dotted var(--muted-ink);
}

.hours-list dt,
.contact-list dt { font-weight: 700; }
.hours-list dd,
.contact-list dd { margin: 0; }
.safety-notice { margin-top: 1.5rem; border-left: .4rem solid var(--brick); }
.safety-notice h2 { font-size: 1.35rem; }

.legal-page section { max-width: 50rem; margin-top: 2rem; }
.notice-date { margin-top: 2rem; font-size: .92rem; font-style: italic; }

.site-footer {
    position: relative;
    display: grid;
    gap: .65rem;
    width: calc(100% - 2rem);
    margin: 1.5rem auto 1rem;
    padding: 2rem 1.5rem 1.25rem;
    border: 4px double var(--rule);
    background: rgba(241, 234, 220, .34);
    box-shadow: inset 0 0 0 3px rgba(57, 48, 38, .07);
    text-align: center;
}

.site-footer::before {
    position: absolute;
    top: -.95rem;
    left: 50%;
    padding: 0 .55rem;
    color: var(--rule);
    background: var(--paper);
    font-size: 1.2rem;
    line-height: 1;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--paper) url("/assets/icons/ornament.svg") center / 1.2rem 1.2rem no-repeat;
    content: "";
    transform: translateX(-50%);
}

.site-footer strong {
    letter-spacing: .06em;
    text-transform: uppercase;
}

.copyright { margin: 0; font-size: .82rem; }

.site-footer .copyright {
    padding-top: .75rem;
    border-top: 1px dotted rgba(57, 48, 38, .55);
    letter-spacing: .02em;
}

.standalone-error {
    max-width: 42rem;
    margin: 10vh auto;
    padding: 2rem 1rem;
    text-align: center;
}

@media (min-width: 38rem) {
    .site-header { padding-inline: 1.5rem; }
    .primary-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .primary-nav a { padding-inline: .75rem; }
    .primary-nav a:nth-child(2) { border-right: 1px solid rgba(57, 48, 38, .6); }
    .primary-nav a:nth-child(-n + 2) { border-bottom: 0; }
    .welcome-grid { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .8fr); }
    .contact-ribbon { grid-template-columns: repeat(3, 1fr); }
    .contact-ribbon p { border-right: 1px solid rgba(57, 48, 38, .45); border-bottom: 0; }
    .contact-ribbon p:last-child { border-right: 0; }
    .button { width: auto; }
    .hours-list div,
    .contact-list div { display: grid; grid-template-columns: minmax(8rem, .8fr) 1fr; gap: 1rem; }
}

@media (min-width: 56rem) {
    .paper-frame { width: calc(100% - 2rem); margin: 1rem auto; }
    .site-header { flex-direction: row; justify-content: space-between; text-align: left; }
    .hero-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(17rem, 1fr); gap: 1rem; align-items: end; padding: 0 1.5rem 1.5rem; }
    .hero-side { padding: 0 0 .25rem; }
    .prose-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-layout { grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); }
    .visit-layout { grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr); }
    .visit-artwork,
    .visit-stack { order: initial; }
    .privacy-layout { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: 2.5rem; }
    .privacy-artwork { margin-top: 2rem; }
    .site-footer { grid-template-columns: 1fr; text-align: center; }
    .copyright { grid-column: 1 / -1; text-align: center; }
}

@media (min-width: 80rem) {
    .masthead { padding-top: 3.25rem; }
    .hero-layout { gap: 2rem; padding-inline: 2.5rem; }
}

@media (forced-colors: active) {
    .paper-frame,
    .action-link,
    .notice-box,
    .detail-card { border-color: CanvasText; }
}

@media print {
    body { background: white; color: black; }
    .paper-frame { width: 100%; margin: 0; border: 0; }
    .primary-nav, .hero-side, .skip-link { display: none; }
    a { color: black; text-decoration: none; }
}

/* Portrait artwork composition. Keep the complete painting visible at every width. */
.hero-art { max-width: 32rem; margin: 0 auto; padding: .45rem; border: 4px double var(--rule); background: var(--paper-light); }
.hero-art img { mask-image: none; -webkit-mask-image: none; }
.hero-art figcaption { padding: .5rem .25rem .1rem; font-size: .88rem; font-style: italic; text-align: center; }
.hero-layout { max-width: var(--measure); margin: 0 auto; }
.hero-side { max-width: 32rem; margin: 0 auto; width: 100%; }
.contact-ribbon { max-width: var(--measure); margin: 1.25rem auto 0; }
.masthead h1 { color: var(--brick); text-shadow: none; }
.primary-nav a[aria-current="page"] { color: var(--brick); }
.action-link { color: var(--paper-light); background: var(--green); border-color: var(--green); }
.action-link::before, .action-link::after { background: var(--paper-light); }
.action-link:hover { background: var(--brick); color: var(--paper-light); }
@media (min-width: 56rem) {
    .page-home .site-header { justify-content: center; }
    .home-composition { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 3rem; max-width: var(--measure); margin: 2.5rem auto 0; padding: 0 1.5rem; }
    .home-composition .masthead { grid-column: 1; grid-row: 1; align-self: end; padding: 1.5rem 0; text-align: left; }
    .home-composition .masthead h1 { font-size: clamp(2.6rem,4.4vw,4.6rem); line-height: .98; }
    .home-composition .doctor-line { justify-content: flex-start; letter-spacing: .025em; font-size: 1.1rem; }
    .home-composition .eyebrow { font-size: .7rem; line-height: 1.7; }
    .home-composition .hero-layout { display: contents; }
    .home-composition .hero-art { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 100%; }
    .home-composition .hero-side { grid-column: 1; grid-row: 2; align-self: start; margin: 0; padding: .5rem 0 2rem; }
    .home-composition .contact-ribbon { grid-column: 1 / -1; width: 100%; margin-top: 2rem; }
}
@media print {
    .home-composition { display: block; margin: 0; }
    .hero-art { max-width: 15rem; }
    .home-composition .masthead { position: static; width: 100%; }
}