@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{color-scheme:light;--paper:#f7f4eb;--ink:#262c23;--green:#28372d;--gold:#e7c991;--line:#d6d1c2}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.65 'DM Sans',sans-serif}
h1,h2,h3,.brand{font-family:'Playfair Display',Georgia,serif;line-height:1.12;margin:0}
a{color:inherit;text-underline-offset:.25em}
:focus-visible{outline:3px solid #b67b24;outline-offset:4px}
img,video{display:block;width:100%}
.wrap{width:min(1160px,calc(100% - 3rem));margin-inline:auto}
.skip{position:absolute;z-index:4;top:.5rem;left:.5rem;padding:.4rem .8rem;background:var(--paper);transform:translateY(-200%)}
.skip:focus{transform:none}
.bar{background:var(--green);color:var(--paper)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
.brand{text-decoration:none;font-size:1.4rem}
nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.9rem}
nav a{text-decoration:none}
nav a:hover,nav a[aria-current]{text-decoration:underline;color:var(--gold)}
.hero,.page-hero{position:relative;display:grid;align-items:end;isolation:isolate;color:white;background:#344739;overflow:hidden}
.hero{min-height:clamp(460px,70svh,810px)}
.hero video,.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::before,.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111b13ed,transparent 98%);z-index:-1}
.hero-inner{padding-block:4rem 5rem}
h1{font-size:clamp(2.9rem,7.8vw,7.3rem);font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.hero h1 span{display:block;color:var(--gold);font-size:.55em;letter-spacing:-.025em;margin-top:.2em}
.jump{display:inline-block;margin-top:1.8rem;color:white;font-weight:600}
#video-toggle{position:absolute;right:1.25rem;bottom:1.25rem;border:1px solid #eee;border-radius:3px;background:#182319e8;color:white;font:inherit;font-size:.85rem;padding:.42rem .8rem;cursor:pointer}
.topics,.media{padding-block:4rem}
h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:1.75rem}
.card{display:grid;grid-template-rows:1fr auto;text-decoration:none;background:#eee9dc;border:1px solid var(--line)}
.card>div{padding:1.15rem}
.card h3{font-size:clamp(1.25rem,2vw,1.8rem)}
.card p{margin:.45rem 0 0}
.card img{aspect-ratio:1.5;object-fit:cover}
.card:hover h3{text-decoration:underline;text-underline-offset:.18em}
.page-hero{min-height:clamp(330px,55svh,630px)}
.page-hero .wrap{padding-block:2.4rem}
.page-hero h1{font-size:clamp(2.5rem,6vw,5.5rem);margin-top:1rem}
.reading{width:min(730px,calc(100% - 3rem));margin:3.5rem auto;font-size:1.1rem}
.reading h2{font-size:clamp(1.55rem,3.2vw,2.4rem);margin-block:2rem 1rem}
.reading li+li{margin-top:.4rem}
.media{padding-top:0}
.media h2{margin-bottom:1.4rem}
.media video{background:var(--green);aspect-ratio:343/180}
.gallery,.plans{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.sources{font-size:.9rem}
footer{background:#eae5d7;border-top:1px solid var(--line);padding-block:2rem}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.plans a{display:grid;place-items:center;background:#f4f0e7}
.plans img{height:clamp(150px,24vw,310px);object-fit:contain}
.credits{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-top:1.6rem}
.credits p{max-width:50ch}
.logos{display:flex;align-items:center;gap:1rem}
.logos img{width:clamp(105px,13vw,175px);max-height:90px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:700px){.wrap,.reading{width:calc(100% - 2rem)}.bar-inner,.credits{flex-direction:column;align-items:flex-start;gap:.75rem}.cards{grid-template-columns:1fr}.hero-inner{padding-bottom:5.25rem}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.plans img{height:clamp(90px,32vw,220px)}}

.gallery a{display:block;cursor:zoom-in}
.gallery a:hover img{filter:brightness(.9)}
body:has(.photo-viewer[open]){overflow:hidden}
.photo-viewer{width:min(94vw,1100px);max-height:94dvh;padding:0;border:1px solid #66766a;border-radius:.65rem;background:#182319;color:white}
.photo-viewer::backdrop{background:#0e140fdd}
.photo-toolbar,.photo-controls{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.65rem 1rem}
.photo-count{font-variant-numeric:tabular-nums}
.photo-viewer figure{margin:0;background:#101811}
.photo-viewer img{width:100%;height:min(68dvh,750px);object-fit:contain;touch-action:pan-y pinch-zoom}
.photo-viewer button{font:inherit;color:white;background:#28372d;border:1px solid #879587;border-radius:.35rem;padding:.4rem .7rem;cursor:pointer}
.photo-viewer button:hover{background:#3a4d3f}
.photo-viewer :focus-visible{outline-color:var(--gold)}

:root{
    --paper:#f6f0e4;
    --ink:#302a23;
    --green:#282f25;
    --gold:#f0ce91;
    --line:#d1c1a8;
    --terracotta:#964e36;
}
body{background:linear-gradient(135deg,#fbf7ee,var(--paper) 60%,#eee4d3)}
.bar{border-bottom:3px solid #ae7551}
.brand{font-weight:700}
.hero::before,.page-hero::before{
    background:linear-gradient(0deg,#1b1915f0 0%,#28251e60 44%,transparent 85%);
}
.hero-inner h1,.page-hero h1{text-shadow:0 2px 18px #1b19157a}
.jump{border-bottom:1px solid var(--gold);text-decoration:none;padding-bottom:.3rem}
.topics h2::after,.media h2::after,.reading h2::after{
    content:'';
    display:block;
    width:3rem;
    height:2px;
    margin-top:.65rem;
    background:var(--terracotta);
}
.card{
    border:1px solid var(--line);
    border-top:3px solid var(--terracotta);
    background:#fbf7ee;
    box-shadow:0 5px 16px #392d1912;
    transition:box-shadow .2s ease,transform .2s ease;
}
.card>div{padding:1.25rem 1.35rem}
.card p{color:#78422e;font-weight:600}
.card:hover,.card:focus-visible{box-shadow:0 12px 22px #392d1926;transform:translateY(-3px)}
.gallery a,.plans a{border:1px solid var(--line);padding:4px;background:#fbf7ee}
footer{background:#e9deca;border-top:3px double #9b8061}
.photo-viewer{border-color:#a88563}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:focus-visible{transform:none}}
/* Architectural illustrations from the project archive */
main{position:relative;isolation:isolate}
main::before,main:has(.page-hero)::after{
    content:'';
    position:absolute;
    z-index:-1;
    pointer-events:none;
    background:url('assets/schita-2.webp') center / contain no-repeat;
    mix-blend-mode:multiply;
    filter:sepia(.85);
}
main:has(.hero)::before{
    top:auto;
    bottom:8rem;
    right:0;
    width:min(72vw,850px);
    height:clamp(19rem,43vw,34rem);
    opacity:.29;
    mask-image:radial-gradient(ellipse at 57% 53%,#000 29%,transparent 75%);
}
.topics{position:relative;padding-top:clamp(4.5rem,9vw,8rem)}
.topics h2{max-width:15ch}
.hero::after,.page-hero::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:7px;
    background:repeating-linear-gradient(90deg,#cba673 0 15px,transparent 15px 29px);
    opacity:.85;
    pointer-events:none;
}
@media(min-width:1000px){
    main:has(.page-hero)::before,main:has(.page-hero)::after{
        width:min(31vw,440px);
        height:360px;
        opacity:.22;
    }
    main:has(.page-hero)::before{
        top:clamp(375px,60svh,680px);
        right:0;
        mask-image:linear-gradient(to right,transparent 8%,#000 65%);
    }
    main:has(.page-hero)::after{
        top:clamp(430px,67svh,735px);
        left:0;
        background-image:url('assets/schita-1.webp');
        opacity:.17;
        mask-image:radial-gradient(ellipse at 18% 49%,#000 12%,transparent 70%);
    }
}
@media(max-width:700px){
    main:has(.hero)::before{top:clamp(460px,70svh,810px);bottom:auto;width:83vw;height:205px;opacity:.23}
}
.brand,nav a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px}
.menu-icon{width:1.3rem;height:1.3rem;flex:none;color:var(--gold)}
.brand .menu-icon{width:1.65rem;height:1.65rem}
@media(max-width:700px){
    .bar-inner{gap:.3rem;padding-block:.4rem .55rem}
    .bar nav{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem}
    .bar nav a{flex-direction:column;justify-content:center;gap:.2rem;padding:.35rem .15rem;text-align:center;font-size:clamp(.73rem,2.9vw,.88rem);line-height:1.2}
    .bar nav a[aria-current]{background:#f0ce911b;border-radius:.25rem}
    .hero{min-height:clamp(360px,67svh,520px)}
    main:has(.hero)::before{top:clamp(360px,67svh,520px)}
    .hero-inner{padding-top:2rem}
    .hero h1{font-size:clamp(2.65rem,10vw,4.25rem)}
    #video-toggle{min-height:44px}
    .page-hero .wrap{padding-block:1.65rem}
    .page-hero h1{overflow-wrap:anywhere}
    .reading{margin-block:2rem;font-size:1rem}
    .photo-toolbar,.photo-controls{padding:.5rem}
    .photo-viewer button{min-height:44px}
    .photo-viewer img{height:min(62dvh,750px)}
}
.language-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;position:relative}
.language-tools select,.language-tools button{font:inherit;font-size:.8rem;color:var(--paper);background:var(--green);border:1px solid #ab9a7a;border-radius:.25rem;min-height:44px;padding:.35rem .55rem}
.language-tools button{cursor:pointer}
#read-status:not(:empty){position:absolute;z-index:5;top:100%;right:0;width:min(16rem,80vw);padding:.55rem;background:var(--green);border:1px solid #ab9a7a;font-size:.85rem}
@media(min-width:701px){.bar-inner{flex-wrap:wrap}.language-tools{margin-left:auto}}
@media(max-width:700px){
    .bar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto}
    .bar nav{grid-column:1/-1;grid-row:2}
    .language-tools{grid-column:2;grid-row:1;justify-content:end;max-width:53vw}
    .bar .brand{font-size:1.15rem}
}