/*
Theme Name: KRA-KRA arkitekter
Author: KRA-KRA arkitekter
Description: Minimalistisk tema for arkitekturprosjekter.
Version: 1.7
Text Domain: kra-kra
*/
:root{--bg:#fbfaf7;--fg:#2a2926;--muted:#7b7973;--line:#dedcd6;--tile:#eeede9}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:"DM Sans",system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.wrap{padding:0 2.5rem}}
.label{font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.site-header{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;padding-top:2rem;padding-bottom:2rem;font-size:.875rem}
.site-header .brand{font-weight:500;letter-spacing:.02em}
.site-header nav{display:flex;gap:1.5rem;color:var(--muted)}
.site-header nav li{list-style:none}
.site-header nav a:hover{color:var(--fg)}
.grid{display:grid;gap:4rem 2.5rem;padding-top:3rem}
@media(min-width:768px){.grid{grid-template-columns:1fr 1fr}}
.card .img{overflow:hidden;background:var(--tile);aspect-ratio:4/3}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1.4s ease}
.card:hover img{filter:grayscale(0)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:1rem}
.card h2{font-size:1rem;font-weight:400}
.project{padding-top:3rem}
.project .hero img{width:100%;max-height:80vh;object-fit:cover}
.project .project-title{margin-top:2rem}
.project .info{margin-top:.75rem;display:grid;gap:1.5rem}
@media(min-width:768px){.project .project-title{text-align:right}.project .info{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,6vw,6rem)}.project .head{order:2;text-align:right}.project .head .project-meta{align-items:flex-end}.project .text{order:1}}
.project .media{margin-top:4rem;display:grid;gap:1rem}
@media(min-width:640px){.project .media{grid-template-columns:1fr 1fr}}
.project .media figure{margin:0!important;width:100%!important;max-width:100%}
.project .media img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;display:block}
.project .media figcaption{margin-top:.5rem;font-size:.75rem;color:var(--muted)}
.project h1{font-size:1.125rem;font-weight:400;overflow-wrap:anywhere}
.project-meta{display:flex;flex-direction:column;gap:.25rem;margin-top:0}
.project .text{color:var(--muted);width:100%;max-width:none;margin-top:0;overflow-wrap:anywhere}
.project .text p{margin-bottom:1rem}
.project .text .wp-block-image,.project .text .wp-block-gallery,.project .text .wp-block-image figure,.project .text .wp-block-gallery figure,.project .text figure.alignleft,.project .text figure.alignright{float:none;width:100%!important;max-width:100%;margin:2rem 0}
.project .text .wp-block-gallery{display:flex;flex-direction:column;gap:2rem}
.project .text .wp-block-gallery figure{margin:0}
.project .text img{width:100%!important;max-width:100%;height:auto!important;max-height:80vh;object-fit:cover;display:block;margin:0}
.project .text .alignwide,.project .text .alignfull{width:100%;max-width:100%;margin-left:0;margin-right:0}
.project .text figcaption{margin-top:.75rem;font-size:.75rem;text-align:left}
.gallery-full{margin-top:4rem;display:grid;gap:2.5rem}
.gallery-full .wp-block-image,.gallery-full figure{margin:0}
.pager{display:flex;justify-content:space-between;margin-top:6rem;padding-top:1.5rem;font-size:.875rem}
.pager a:first-child{color:var(--muted)}
.page-content{padding-top:3rem;min-height:40vh}
.page-content h1{font-size:1.125rem;font-weight:400;margin-bottom:2rem}
.page-content img{width:100%;height:auto}
.page-content > p{max-width:36rem}
.page-content p{margin-bottom:1rem;color:var(--muted)}
.site-footer{margin-top:8rem;padding-top:3rem;padding-bottom:3rem;display:grid;gap:2rem;font-size:.875rem;color:var(--muted)}
@media(min-width:768px){.site-footer{grid-template-columns:repeat(3,1fr)}.site-footer .r{text-align:right}}
.site-footer .name{color:var(--fg)}
.site-footer .copyright{margin-top:.25rem}