:root {
--ivory:#f7f3ed;
    --cream:#fffaf3;
    --maroon:#6b1e1e;
    --maroon2:#8d2f2f;
    --gold:#c8a96b;
    --charcoal:#2e2e2e;
    --muted:#766d66;
    --border:#e8ddd0;
    --shadow:0 20px 55px rgba(73,40,28,.12);
    --serif:'Cormorant Garamond',serif;
    --sans:'Inter',sans-serif}

* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
margin:0;
    background:var(--ivory);
    color:var(--charcoal);
    font-family:var(--sans);
    line-height:1.7;
    overflow-x:hidden}

a {
color:inherit;
    text-decoration:none}

img {
max-width:100%;
    display:block}

.container {
width:min(1180px,calc(100% - 36px));
    margin:auto}

.motif {
position:fixed;
    z-index:-1;
    border:1px solid rgba(107,30,30,.08);
    border-radius:50%;
    pointer-events:none}

.motif:after,.motif:before {
content:"";
    position:absolute;
    inset:14%;
    border:1px dashed rgba(200,169,107,.22);
    border-radius:50%}

.motif-one {
width:350px;
    height:350px;
    left:-180px;
    top:20%}

.motif-two {
width:450px;
    height:450px;
    right:-260px;
    bottom:5%}

.top-strip {
background:var(--maroon);
    color:#fff;
    font-size:.78rem}

.top-strip-inner {
min-height:36px;
    display:flex;
    justify-content:space-between;
    align-items:center}

.lang-links {
display:flex;
    gap:4px}

.lang-links a {
padding:4px 8px;
    border-radius:20px;
    opacity:.78}

.lang-links a.active,.lang-links a:hover {
background:rgba(255,255,255,.16);
    opacity:1}

.site-header {
position:sticky;
    top:0;
    z-index:1000;
    background:rgba(247,243,237,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(107,30,30,.09);
    transition:.3s}

.site-header.scrolled {
box-shadow:0 10px 30px rgba(60,35,25,.08)}

.navbar {
min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px}

.brand {
display:flex;
    align-items:center;
    gap:12px}

.brand-mark {
width:50px;
    height:50px;
    border-radius:50% 50% 48% 52%/45% 55% 45% 55%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--maroon),#3f1111);
    color:var(--gold);
    font-family:var(--serif);
    font-size:1.35rem;
    font-weight:700;
    box-shadow:inset 0 0 0 3px rgba(200,169,107,.24),0 8px 18px rgba(107,30,30,.18)}

.brand-mark img {
width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%}

.brand strong {
display:block;
    font-family:var(--serif);
    font-size:1.42rem;
    line-height:1;
    color:var(--maroon)}

.brand small {
display:block;
    color:var(--muted);
    font-size:.68rem;
    letter-spacing:.08em;
    margin-top:5px}

.main-nav {
display:flex;
    align-items:center;
    gap:4px}

.main-nav a {
padding:10px 10px;
    font-size:.86rem;
    font-weight:600;
    color:#4e4641;
    position:relative}

.main-nav a:after {
content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:2px;
    height:2px;
    background:var(--gold);
    transition:.25s}

.main-nav a:hover,.main-nav a.active {
color:var(--maroon)}

.main-nav a:hover:after,.main-nav a.active:after {
left:10px;
    right:10px}

.menu-toggle {
display:none;
    background:none;
    border:0;
    padding:8px}

.menu-toggle span {
display:block;
    width:25px;
    height:2px;
    background:var(--maroon);
    margin:5px;
    transition:.25s}

.hero {
min-height:690px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:radial-gradient(circle at 80% 20%,rgba(200,169,107,.2),transparent 30%),linear-gradient(135deg,#fffaf4 0%,#f2e7da 100%)}

.hero:before {
content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(107,30,30,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(107,30,30,.025) 1px,transparent 1px);
    background-size:48px 48px}

.hero-grid {
position:relative;
    display:grid;
    grid-template-columns:1.04fr .96fr;
    align-items:center;
    gap:60px;
    padding:70px 0}

.eyebrow {
text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--maroon);
    font-size:.76rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:10px}

.eyebrow:before {
content:"";
    width:40px;
    height:1px;
    background:var(--gold)}

h1,h2,h3,h4 {
font-family:var(--serif);
    line-height:1.12;
    margin:0 0 16px}

h1 {
font-size:clamp(3.25rem,7vw,6.2rem);
    color:var(--maroon);
    font-weight:600;
    letter-spacing:-.035em}

.hero-subtitle {
font-family:var(--serif);
    font-size:1.55rem;
    color:#6c5e54;
    margin-bottom:18px}

.hero-quote {
font-size:1.08rem;
    color:#4d443e;
    border-left:3px solid var(--gold);
    padding-left:18px;
    max-width:610px}

.hero-actions {
display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px}

.btn {
display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    border:1px solid transparent;
    font-weight:700;
    font-size:.88rem;
    transition:.25s;
    cursor:pointer}

.btn-primary {
background:var(--maroon);
    color:#fff;
    box-shadow:0 12px 28px rgba(107,30,30,.22)}

.btn-primary:hover {
transform:translateY(-2px);
    background:var(--maroon2)}

.btn-outline {
border-color:var(--maroon);
    color:var(--maroon);
    background:transparent}

.btn-outline:hover {
background:var(--maroon);
    color:#fff}

.portrait-wrap {
position:relative;
    max-width:490px;
    margin:auto}

.portrait-frame {
position:relative;
    border-radius:48% 48% 20px 20px;
    overflow:hidden;
    background:#eadccf;
    aspect-ratio:4/5;
    box-shadow:var(--shadow)}

.portrait-frame img {
width:100%;
    height:100%;
    object-fit:cover}

.portrait-frame:after {
content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(62,17,17,.28))}

.portrait-ring {
position:absolute;
    inset:-22px;
    border:1px solid rgba(107,30,30,.24);
    border-radius:50% 50% 24px 24px;
    transform:rotate(2deg)}

.floating-note {
position:absolute;
    left:-45px;
    bottom:45px;
    background:rgba(255,250,243,.94);
    backdrop-filter:blur(10px);
    padding:16px 19px;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    font-family:var(--serif);
    font-size:1.05rem;
    color:var(--maroon)}

.section {
padding:96px 0}

.section-soft {
background:#fffaf5}

.section-maroon {
background:linear-gradient(135deg,#4a1010,var(--maroon));
    color:#fff;
    position:relative;
    overflow:hidden}

.section-maroon:before {
content:"“";
    font-family:var(--serif);
    font-size:28rem;
    position:absolute;
    left:3%;
    top:-160px;
    color:rgba(255,255,255,.045)}

.section-heading {
max-width:760px;
    margin-bottom:44px}

.section-heading.center {
text-align:center;
    margin-left:auto;
    margin-right:auto}

.section-heading h2 {
font-size:clamp(2.5rem,5vw,4.2rem);
    color:var(--maroon);
    font-weight:600}

.section-heading p {
color:var(--muted)}

.section-maroon .section-heading h2,.section-maroon .section-heading p {
color:#fff}

.stats {
margin-top:-45px;
    position:relative;
    z-index:5}

.stats-grid {
display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    overflow:hidden}

.stat {
padding:28px;
    text-align:center;
    border-right:1px solid var(--border)}

.stat:last-child {
border:0}

.stat strong {
display:block;
    font-family:var(--serif);
    font-size:2.7rem;
    color:var(--maroon);
    line-height:1}

.stat span {
font-size:.78rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted)}

.card-grid {
display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px}

.feature-grid {
grid-template-columns:repeat(4,1fr)}

.card {
background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(71,42,28,.07);
    transition:.35s;
    position:relative}

.card:hover {
transform:translateY(-8px);
    box-shadow:var(--shadow)}

.card-image {
position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#eadfd3}

.card-image.tall {
aspect-ratio:4/5}

.card-image img {
width:100%;
    height:100%;
    object-fit:cover;
    transition:.55s}

.card:hover .card-image img {
transform:scale(1.07)}

.card-overlay {
position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(55,13,13,.83));
    opacity:.85;
    transition:.3s}

.card:hover .card-overlay {
opacity:1}

.card-body {
padding:23px}

.card h3 {
font-size:1.65rem;
    color:var(--maroon)}

.meta {
display:flex;
    gap:14px;
    flex-wrap:wrap;
    color:#8c7768;
    font-size:.78rem;
    margin-bottom:10px}

.pill {
display:inline-flex;
    padding:5px 11px;
    border-radius:999px;
    background:#f1e7dc;
    color:var(--maroon);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em}

.feature-card {
padding:30px;
    text-align:center}

.feature-icon {
width:62px;
    height:62px;
    margin:0 auto 18px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#f4e9dc,#fff);
    color:var(--maroon);
    font-size:1.3rem;
    border:1px solid var(--border)}

.feature-card h3 {
font-size:1.5rem}

.split {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center}

.image-stack {
position:relative;
    padding:22px 0 0 22px}

.image-stack img {
border-radius:18px;
    box-shadow:var(--shadow);
    aspect-ratio:4/5;
    object-fit:cover;
    width:100%}

.image-stack:before {
content:"";
    position:absolute;
    left:0;
    top:0;
    width:75%;
    height:75%;
    border:2px solid var(--gold);
    border-radius:18px;
    z-index:-1}

.text-prose h2 {
font-size:3.4rem;
    color:var(--maroon)}

.text-prose p {
color:#655b54}

.timeline {
position:relative;
    max-width:930px;
    margin:auto}

.timeline:before {
content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:1px;
    background:linear-gradient(var(--gold),rgba(200,169,107,.15))}

.timeline-item {
width:50%;
    padding:0 45px 45px;
    position:relative}

.timeline-item:nth-child(even) {
margin-left:50%}

.timeline-dot {
position:absolute;
    top:8px;
    width:17px;
    height:17px;
    border:4px solid var(--ivory);
    border-radius:50%;
    background:var(--maroon);
    box-shadow:0 0 0 1px var(--gold)}

.timeline-item:nth-child(odd) .timeline-dot {
right:-9px}

.timeline-item:nth-child(even) .timeline-dot {
left:-8px}

.timeline-year {
color:var(--gold);
    font-family:var(--serif);
    font-size:1.5rem;
    font-weight:700}

.timeline-box {
background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    box-shadow:0 12px 30px rgba(70,40,28,.07)}

.page-hero {
padding:86px 0 72px;
    background:linear-gradient(135deg,#fffaf4,#eadfd4);
    text-align:center;
    position:relative;
    overflow:hidden}

.page-hero:after {
content:"";
    position:absolute;
    width:360px;
    height:360px;
    border:1px solid rgba(107,30,30,.12);
    border-radius:50%;
    right:-150px;
    top:-190px}

.page-hero h1 {
font-size:clamp(3rem,6vw,5.3rem)}

.breadcrumb {
font-size:.8rem;
    color:var(--muted)}

.filter-bar {
display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:35px}

.search-box {
display:flex;
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
    min-width:min(100%,360px)}

.search-box input {
border:0;
    padding:13px 18px;
    flex:1;
    background:transparent;
    outline:0}

.search-box button {
border:0;
    background:var(--maroon);
    color:#fff;
    padding:0 18px}

.filters {
display:flex;
    gap:8px;
    flex-wrap:wrap}

.filters a {
padding:9px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:.8rem;
    background:#fff}

.filters a.active,.filters a:hover {
background:var(--maroon);
    color:#fff}

.masonry {
columns:3 290px;
    column-gap:20px}

.gallery-item {
break-inside:avoid;
    margin-bottom:20px;
    position:relative;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    background:#ddd}

.gallery-item img {
width:100%;
    transition:.45s}

.gallery-item:hover img {
transform:scale(1.05)}

.gallery-caption {
position:absolute;
    inset:auto 0 0;
    padding:55px 18px 16px;
    color:#fff;
    background:linear-gradient(transparent,rgba(42,9,9,.88));
    transform:translateY(20%);
    opacity:0;
    transition:.3s}

.gallery-item:hover .gallery-caption {
transform:none;
    opacity:1}

.lightbox {
position:fixed;
    inset:0;
    background:rgba(25,8,8,.94);
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px}

.lightbox.open {
display:flex}

.lightbox img {
max-height:86vh;
    max-width:92vw;
    border-radius:10px}

.lightbox-close {
position:absolute;
    right:25px;
    top:20px;
    color:#fff;
    font-size:2rem;
    background:none;
    border:0;
    cursor:pointer}

.quote-wrap {
position:relative;
    max-width:900px;
    margin:auto;
    text-align:center;
    padding:30px}

.quote-wrap blockquote {
font-family:var(--serif);
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.16;
    margin:0;
    color:#fff}

.quote-wrap cite {
display:block;
    margin-top:24px;
    color:var(--gold);
    font-style:normal}

.contact-grid {
display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:30px}

.contact-card,.form-card {
background:#fff;
    padding:34px;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 12px 35px rgba(70,40,28,.06)}

.contact-line {
display:flex;
    gap:15px;
    margin:22px 0}

.contact-line i {
width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f5ebe0;
    color:var(--maroon)}

.form-grid {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px}

.form-group {
margin-bottom:18px}

.form-group.full {
grid-column:1/-1}

.form-label {
display:block;
    font-weight:700;
    font-size:.82rem;
    margin-bottom:7px}

.form-control {
width:100%;
    border:1px solid #ddcfc1;
    background:#fffdf9;
    border-radius:10px;
    padding:13px 14px;
    font:inherit;
    outline:0}

.form-control:focus {
border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(200,169,107,.18)}

textarea.form-control {
min-height:130px;
    resize:vertical}

.alert {
padding:14px 16px;
    border-radius:10px;
    margin-bottom:20px}

.alert-success {
background:#ecf8ef;
    color:#185d2d;
    border:1px solid #bfe5c8}

.article-layout {
display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:42px}

.article-content {
background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:clamp(25px,5vw,55px);
    box-shadow:0 12px 35px rgba(70,40,28,.06)}

.article-content h1 {
font-size:clamp(2.5rem,6vw,4.7rem)}

.article-content h2,.article-content h3 {
color:var(--maroon);
    margin-top:1.6em}

.article-content p {
margin:1em 0}

.article-feature {
border-radius:15px;
    width:100%;
    max-height:570px;
    object-fit:cover;
    margin:25px 0}

.sidebar-card {
background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:22px;
    margin-bottom:22px}

.sidebar-card h3 {
color:var(--maroon)}

.book-detail {
display:grid;
    grid-template-columns:360px 1fr;
    gap:55px;
    align-items:start}

.book-cover-large {
border-radius:14px;
    box-shadow:var(--shadow);
    width:100%}

.media-embed {
aspect-ratio:16/9;
    width:100%;
    border:0;
    border-radius:12px}

.empty-state {
text-align:center;
    padding:55px 20px;
    border:1px dashed #d8c7b7;
    border-radius:16px;
    color:var(--muted);
    background:rgba(255,255,255,.5)}

.site-footer {
background:#2c1010;
    color:#eadfd5;
    padding-top:70px}

.footer-grid {
display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:45px}

.site-footer h4 {
color:var(--gold);
    font-size:1.3rem}

.site-footer a {
display:block;
    margin:8px 0;
    color:#ddcfc7}

.footer-brand {
margin-bottom:18px}

.footer-brand strong {
color:#fff}

.footer-brand small {
color:#c5aea4}

.socials {
display:flex;
    gap:9px}

.socials a {
width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    margin:0}

.socials a:hover {
background:var(--gold);
    color:#341111}

.footer-bottom {
border-top:1px solid rgba(255,255,255,.1);
    margin-top:55px;
    padding:19px 0;
    font-size:.82rem;
    color:#bea9a1}

.footer-bottom a {
display:inline;
    color:var(--gold)}

.back-top {
position:fixed;
    right:20px;
    bottom:20px;
    width:45px;
    height:45px;
    border:0;
    border-radius:50%;
    background:var(--maroon);
    color:#fff;
    display:none;
    z-index:1200;
    box-shadow:0 10px 25px rgba(107,30,30,.3)}

.back-top.show {
display:block}

.reveal {
opacity:0;
    transform:translateY(25px);
    transition:.7s}

.reveal.visible {
opacity:1;
    transform:none}

@media(max-width:1050px) {
.main-nav a {
padding:10px 7px;
    font-size:.78rem}

.feature-grid {
grid-template-columns:repeat(2,1fr)}

.footer-grid {
grid-template-columns:1.4fr 1fr 1fr}

.footer-grid>div:last-child {
grid-column:1/-1}

}

@media(max-width:860px) {
.top-strip-inner>span {
display:none}

.top-strip-inner {
justify-content:flex-end}

.navbar {
min-height:72px}

.menu-toggle {
display:block;
    z-index:20}

.main-nav {
position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#fffaf5;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:16px 18px 22px;
    border-bottom:1px solid var(--border);
    box-shadow:0 20px 35px rgba(55,30,20,.12);
    transform:translateY(-15px);
    opacity:0;
    visibility:hidden;
    transition:.25s}

.main-nav.open {
transform:none;
    opacity:1;
    visibility:visible}

.main-nav a {
font-size:.92rem;
    padding:11px 12px}

.hero {
min-height:auto}

.hero-grid {
grid-template-columns:1fr;
    padding:65px 0 90px}

.hero-copy {
text-align:center}

.eyebrow {
justify-content:center}

.hero-quote {
margin-inline:auto;
    text-align:left}

.hero-actions {
justify-content:center}

.portrait-wrap {
width:min(86%,480px)}

.floating-note {
left:-15px}

.stats-grid {
grid-template-columns:repeat(2,1fr)}

.stat:nth-child(2) {
border-right:0}

.stat:nth-child(-n+2) {
border-bottom:1px solid var(--border)}

.split,.contact-grid,.article-layout,.book-detail {
grid-template-columns:1fr}

.card-grid {
grid-template-columns:repeat(2,1fr)}

.timeline:before {
left:10px}

.timeline-item,.timeline-item:nth-child(even) {
width:100%;
    margin-left:0;
    padding:0 0 35px 42px}

.timeline-item:nth-child(odd) .timeline-dot,.timeline-item:nth-child(even) .timeline-dot {
left:2px;
    right:auto}

.footer-grid {
grid-template-columns:1fr 1fr}

.footer-grid>div:first-child,.footer-grid>div:last-child {
grid-column:1/-1}

}

@media(max-width:580px) {
.container {
width:min(100% - 24px,1180px)}

.brand strong {
font-size:1.15rem}

.brand small {
font-size:.58rem}

.brand-mark {
width:43px;
    height:43px}

.section {
padding:72px 0}

.hero-grid {
gap:45px}

.hero h1 {
font-size:3.25rem}

.portrait-ring {
inset:-12px}

.floating-note {
position:relative;
    left:auto;
    bottom:auto;
    margin:-20px 18px 0;
    text-align:center}

.card-grid,.feature-grid {
grid-template-columns:1fr}

.form-grid {
grid-template-columns:1fr}

.stats {
margin-top:-30px}

.stat {
padding:20px 10px}

.stat strong {
font-size:2.2rem}

.footer-grid {
grid-template-columns:1fr}

.footer-grid>div {
grid-column:auto!important}

.page-hero {
padding:65px 0 55px}

.article-content {
border-radius:12px}

.book-detail {
gap:30px}

.book-cover-large {
max-width:320px;
    margin:auto}

.masonry {
columns:1}

.section-heading h2,.text-prose h2 {
font-size:2.65rem}

}