@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
/* Theme Name: Černobor Blockout Theme URI: https://cernobor.cz/ Author: Černobor Description: Visual blockout theme for Černobor. Image-free foundation with editorial, forest-inspired layouts. Version: 0.1.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: cernobor */
:root {
    /* Černobor digital palette */

    --green: #19472A;
    --green-dark: #153D24;

    --red: #873A20;
    --gold: #D4B32A;

    --cream: #F4F3EE;
    --black: #191919;

    /* Semantic colours */
    --forest: var(--green);
    --forest-dark: var(--green-dark);
    --paper: var(--cream);
    --paper-2: #EAE8DF;
    --ink: var(--black);

    --accent: var(--red);
    --highlight: var(--gold);

    --line: rgba(25, 25, 25, .16);

    --max: 1280px;

    --serif: "Inknut Antiqua", Georgia, serif;
    --sans: "Montserrat", Arial, sans-serif;
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.6
}
img{
    max-width:100%;
    height:auto
}
a{
    color:inherit;
    text-decoration:none
}
p{
    margin:0 0 1.2rem
}
.site-header {
    background-color: #153D24;
    width: 100%;
    min-height: 100px;
}
.nav-wrap{
    max-width:none;
    margin:auto;
    padding:0 28px;
    min-height:100px;
    display:flex;
    align-items:center;
    gap:38px
}

.main-nav li {
	color: 	var(--cream);
	opacity: .75;
}

.brand{
    display:flex;
    align-items:center;
    justify-content:center;
    width:220px;
    height:82px;
    flex:0 0 220px;
    color:#f4f0e6;
    font-family:var(--serif);
    font-size:1.15rem;
    letter-spacing:.12em;
    white-space:nowrap
}
.brand-logo-box{
    width:190px;
    height:58px;
    border:1px dashed rgba(244,240,230,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative
}
.brand-logo-box::after{
    content:'LOGO';
    font-family:var(--sans);
    font-size:.62rem;
    letter-spacing:.2em;
    opacity:.45
}

.main-nav{
    display:flex;
    gap:28px;
    margin-left:auto;
    align-items:center;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.11em
}
.main-nav a{
    opacity: .75;
    padding: 31px 0;
    position: relative;
    color: var(--paper);
}
.main-nav a:hover{
    opacity:1
}
.main-nav a:not(.nav-cta)::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:23px;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .2s ease
}
.main-nav a:not(.nav-cta):hover::after{
    transform:scaleX(1)
}
.nav-cta{
    padding:11px 18px!important;
    border:1px solid rgba(244,240,230,.65);
background: #873A20;
color: #F4F3EE;
    margin-left:8px
}
.nav-cta:hover{
    background: #D4B32A;
color: #191919;
}
.menu-toggle{
    display:none;
    background:none;
    border:0;
    color:inherit;
    font-size:1.4rem
}
 .hero{
min-height: 780px;
    background: linear-gradient(180deg, #20251d 0%, #34382b 45%, #1e211b 100%);
    background-image: linear-gradient(rgb(79 131 98 / 45%), rgb(82 145 106 / 45%)), var(--hero-image);
    background-repeat: no-repeat;
    background-position: center;
	background-size: cover;
    color: #f5f0e4;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero:before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at center,transparent 10%,rgba(0,0,0,.25) 100%)
}
.hero-inner{
    position:relative;
    z-index:1;
    padding:165px 24px 90px;
    max-width:900px
}
.eyebrow{
    font-size:.78rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    opacity:.75
}
.hero h1{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(4rem,11vw,9rem);
    line-height:.9;
    letter-spacing:.02em;
    margin:20px 0
}
.hero .edition{
    font-family:var(--serif);
    font-size:clamp(1.3rem,2.5vw,2rem)
}
.hero .tagline{
    font-family:var(--serif);
    font-size:1.2rem;
    margin:25px auto 35px;
    opacity:.9
}
.actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap
}
.button{
    display:inline-block;
    padding:13px 25px;
    border:1px solid currentColor;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.75rem
}
.button-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff
}
.button-light{
    color:#fff
}
.scroll-cue{
    position:absolute;
    bottom:25px;
    left:50%;
    font-size:1.4rem;
    opacity:.6
}
 .section{
    padding:100px 28px
}
.section-inner{
    max-width:var(--max);
    margin:auto
}
.section-dark{
    background:var(--forest);
    color:#f1ecdf
}
.section-title{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(2.2rem,5vw,4rem);
    line-height:1.05;
    margin:0 0 24px
}
.section-lead{
    font-size:1.15rem;
    max-width:650px;
    color:inherit;
    opacity:.78
}
.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:500px
}
.split-copy{
    padding:80px clamp(28px,6vw,90px);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.split-media,.media-placeholder{
    min-height:420px;
    background:#a7a291;
    position:relative;
    display:grid;
    place-items:center
}
.media-placeholder:after{
    content:'FOTOGRAFIE / GRAFIKA';
    font-size:.72rem;
    letter-spacing:.2em;
    color:#5e5b50
}
.split-media{
    background:#b4ad99
}
 .pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    margin-top:50px
}
.pillar{
    padding:45px 28px;
    border-right:1px solid var(--line);
    text-align:center
}
.pillar:last-child{
    border-right:0
}
.pillar-icon{
    font-size:1.6rem;
    margin-bottom:20px
}
.pillar h3{
    font-family:var(--serif);
    font-weight:400;
    font-size:1.25rem;
    margin:0 0 12px
}
.pillar p{
    font-size:.9rem;
    color:var(--muted)
}
 .map-block{
    min-height:560px;
    background:#3a4031;
    display:grid;
    place-items:center;
    color:#e9e2d2
}
.map-placeholder{
    width:min(850px,90%);
    aspect-ratio:16/8;
    border:1px dashed rgba(255,255,255,.4);
    display:grid;
    place-items:center;
    text-align:center;
    font-family:var(--serif);
    font-size:1.4rem;
    opacity:.8
}
.photo-strip{
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:6px;
    background:var(--ink)
}
.photo-strip .media-placeholder{
    min-height:310px;
    background:#65695d
}
.photo-strip .media-placeholder:nth-child(2){
    background:#777565
}
.photo-strip .media-placeholder:nth-child(3){
    background:#50554b
}
 .info-section{
    background:var(--ink);
    color:#f0ebdf
}
.info-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-top:45px
}
.info-card{
    background:#e5decd;
    color:var(--ink);
    padding:28px 18px;
    min-height:160px
}
.info-card h3{
    font-family:var(--serif);
    font-weight:400;
    margin:0 0 12px;
    font-size:1.1rem
}
.info-card small{
    display:block;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.65rem;
    margin-bottom:15px;
    opacity:.65
}
.info-card.wide{
    grid-column:span 2
}
.footer{
    background:#11130f;
    color:#dcd6c8;
    padding:55px 28px
}
.footer-inner{
    max-width:var(--max);
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap
}
.footer .brand{
    font-size:1rem
}
.footer-note{
    font-size:.75rem;
    opacity:.55
}
 .page-hero{
    padding:160px 28px 75px;
    background:var(--forest);
    color:#f2ecdf
}
.page-hero-inner{
    max-width:var(--max);
    margin:auto
}
.page-hero h1{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(3rem,7vw,6rem);
    line-height:1;
    margin:15px 0 0
}
.content-wrap{
    max-width:850px;
    margin:auto;
    padding:80px 28px
}
.content-wrap h2,.content-wrap h3{
    font-family:var(--serif);
    font-weight:400;
    line-height:1.15
}
.content-wrap h2{
    font-size:2.2rem;
    margin-top:2.2em
}
.content-wrap h3{
    font-size:1.5rem;
    margin-top:2em
}
.content-wrap blockquote{
    border-left:3px solid var(--accent);
    padding-left:25px;
    font-family:var(--serif);
    font-size:1.35rem
}
.wp-block-image{
    margin:2.5rem 0
}
.site-main a:not(.button){
	color: var(--red);
    text-decoration:underline;
    text-decoration-color:rgba(112,117,74,.25);
    text-underline-offset:3px
}

.site-main a:not(.button):hover{
	color: var(--black);
    text-decoration:underline;
    text-decoration-color:rgba(112,117,74,1);
    text-underline-offset:3px
}

 @media(max-width:900px){
    .main-nav{
        gap:14px
    }
    .info-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .pillars{
        grid-template-columns:repeat(2,1fr)
    }
    .pillar:nth-child(2){
        border-right:0
    }
    .pillar:nth-child(-n+2){
        border-bottom:1px solid var(--line)
    }
    .photo-strip{
        grid-template-columns:1fr 1fr
    }
    .photo-strip .media-placeholder:last-child{
        grid-column:span 2
    }
    .split{
        grid-template-columns:1fr
    }
    .split-media{
        order:-1
    }
    .split-copy{
        padding:65px 28px
    }
}
 @media(max-width:680px){
    .nav-wrap{
        padding:0 16px;
        min-height:68px
    }
    .brand{
        width:180px;
        height:68px;
        flex-basis:180px;
        justify-content:flex-start
    }
    .brand-logo-box{
        width:160px;
        height:50px
    }
    .brand-logo-box .custom-logo{
        max-width:150px;
        max-height:46px
    }
    .menu-toggle{
        display:block;
        margin-left:auto
    }
    .main-nav{
        display:none;
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:var(--forest);
        padding:18px 20px;
        flex-direction:column;
        align-items:stretch
    }
    .main-nav.is-open{
        display:flex
    }
    .nav-cta{
        text-align:center
    }
    .hero{
        min-height:680px
    }
    .hero-inner{
        padding-top:120px
    }
    .section{
        padding:70px 20px
    }
    .pillars,.info-grid{
        grid-template-columns:1fr
    }
    .pillar{
        border-right:0!important;
        border-bottom:1px solid var(--line)!important
    }
    .info-card.wide{
        grid-column:auto
    }
    .photo-strip{
        grid-template-columns:1fr
    }
    .photo-strip .media-placeholder:last-child{
        grid-column:auto
    }
    .split-media{
        min-height:300px
    }

}