/*
Theme Name: Bysans Child
Template: generatepress
Version: 1.0
*/

/* =========================================================
   BYSANS — INNHOLDSFORTEGNELSE

   01. Design tokens
   02. Base / reset
   03. Layout helpers
   04. Header / navigation
   05. Front page
   06. Project grid
   07. Single project
   08. Pages
   09. Footer
   10. Responsive
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root{
  --site-max:1200px;
  --text-max:760px;

  --space-page:clamp(24px, 5vw, 72px);
  --space-section:clamp(80px, 12vw, 160px);

  --color-bg:#fff;
  --color-text:#111;
  --color-muted:#666;
  --color-line:rgba(0,0,0,0.08);
}

@font-face{
  font-family:"Isocpeur";
  src:url("fonts/isocpeur.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   02. BASE / RESET
========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.45;
}


/* =========================================================
   03. LAYOUT HELPERS
========================================================= */

.site-shell{
  width:min(calc(100vw - (var(--space-page) * 2)), var(--site-max));
  margin-inline:auto;
}

.text-shell{
  max-width:var(--text-max);
  margin-inline:auto;
}


/* =========================================================
   04. HEADER / NAVIGATION
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:0;
}

.inside-header{
  width:calc(100vw - 96px);
  max-width:none;
  margin:0 auto;
  padding:34px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.site-branding,
.site-logo,
.site-description{
  margin:0;
}

.site-description{
  display:none;
}

.main-title{
  margin:0;
  line-height:1;
}

.main-title a,
.site-title a{
  font-family:"Isocpeur", sans-serif;
  font-size:44px;
  font-weight:400;
  letter-spacing:0.01em;
  color:#111;
  text-decoration:none;
}

.main-title a:hover,
.site-title a:hover{
  color:#111;
  text-decoration:none;
}

.main-navigation{
  background:transparent;
}

.main-navigation .main-nav ul{
  display:flex;
  gap:36px;
  align-items:center;
}

.main-navigation .main-nav ul li a{
  padding:0;
  font-size:18px;
  line-height:1;
  color:#111;
  text-decoration:none;
  font-weight:400;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{
  color:#111;
  text-decoration:underline;
  text-underline-offset:0.22em;
}

.bysans-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
}

.bysans-header__inner{
  width:calc(100vw - 96px);
  margin:0 auto;
  padding:34px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.bysans-logo{
  font-family:"Isocpeur", sans-serif;
  font-size:44px;
  line-height:1;
  font-weight:500;
  letter-spacing:-0.015em;
  color:#111;
  text-decoration:none;
}

.bysans-logo:hover,
.bysans-logo:visited{
  color:#111;
  text-decoration:none;
}

.bysans-nav{
  display:flex;
  gap:36px;
  align-items:center;
}

.bysans-nav a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1;
  color:#111;
  text-decoration:none;
  font-weight:400;
}

.bysans-nav a:hover{
  text-decoration:underline;
  text-underline-offset:0.22em;
}

/* =========================================================
   04.1 LOGO TONE
========================================================= */

.bysans-logo{
  transition:color .25s ease;
}

.bysans-logo__by{
  color:#111;
  transition:color .25s ease;
}

.bysans-logo__sans{
  color:#555;
  transition:color .25s ease;
}

.bysans-logo:hover .bysans-logo__sans{
  color:#222;
}

/* =========================================================
   05. FRONT PAGE
========================================================= */

.bysans-front{
  padding:80px 0 120px;
}

.bysans-hero{
  max-width:900px;
}

.bysans-kicker{
  margin:0 0 28px;
  font-size:14px;
  color:var(--color-muted);
}

.bysans-hero h1{
  margin:0;
  max-width:820px;
  font-size:clamp(42px, 7vw, 92px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-0.045em;
}


/* =========================================================
   06. PROJECT GRID
========================================================= */

.projects{
  width:min(calc(100vw - 160px), 960px);
  margin:0 auto;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:72px 56px;
}


/* 06.1 Project link */

.project-link,
.project-link:visited,
.project-link:hover,
.project-link:focus{
  display:block;
  color:#111;
  text-decoration:none;
}

.project-link *{
  color:inherit;
  text-decoration:none;
}


/* 06.2 Images */

.project-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
}

.project-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.project-image--hover{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .25s ease;
}

.project-link:hover .project-image--hover{
  opacity:1;
}


/* 06.3 Typography */

.project-title{
  margin:14px 0 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.35;
  font-weight:400;
  color:#111;
}

.project-location{
  margin:4px 0 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  line-height:1.35;
  color:#111;
}

/* =========================================================
   07. SINGLE PROJECT
========================================================= */


.single-project{
  width:min(calc(100vw - 96px), 900px);
  margin:72px auto 140px;
}

.single-project__intro{
  display:block;
  max-width:640px;
  margin:0 auto 56px;
}

.single-project h1{
  margin:0 0 52px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:32px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-0.02em;
}

.single-project__meta{
  margin:0 0 28px;
  display:grid;
  gap:16px;
  font-size:16px;
  line-height:1.45;
}

.single-project__meta div{
  display:block;
}

.single-project__meta dt,
.single-project__meta dd{
  display:inline;
  margin:0;
}

.single-project__meta dt{
  color:#111;
}

.single-project__meta dt::after{
  content:": ";
}

.single-project__text{
  max-width:640px;
  margin:28px 0 0;
  font-size:18px;
  line-height:1.45;
  font-style:italic;
}

.single-project__hero{
  max-width:640px;
  margin:0 auto;
}

.single-project__hero img{
  width:100%;
  height:auto;
  display:block;
}

.single-project__gallery{
  max-width:640px;
  margin:24px auto 0;
  display:grid;
  gap:24px;
}

.single-project__gallery-item{
  margin:0;
}

.single-project__gallery img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   08. PAGES
========================================================= */

.bysans-page{
  width:min(calc(100vw - 96px), 900px);
  margin:120px auto 160px;
}


/* =========================================================
   08.1 ABOUT
========================================================= */

.bysans-about__intro{
  max-width:620px;
  margin:0 auto 120px;
}

.bysans-about__text{
  font-family:Arial, Helvetica, sans-serif;
  font-size:22px;
  line-height:1.42;
  letter-spacing:-0.03em;
  color:#111;
}

.bysans-about__text p{
  margin:0;
}

.bysans-about__text p + p{
  margin-top:28px;
}


/* =========================================================
   08.2 ABOUT INFO
========================================================= */

.bysans-about__info{
  max-width:620px;
  margin:0 auto;
}

.bysans-about__block + .bysans-about__block{
  margin-top:64px;
}

.bysans-about__info h2{
  margin:0 0 14px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:1.3;
  font-weight:400;
  color:#111;
}

.bysans-about__info p{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:17px;
  line-height:1.55;
  color:#111;
}

.bysans-about__info p + p{
  margin-top:18px;
}

.bysans-about__info a{
  color:#111;
  text-decoration:none;
}

.bysans-about__info a:hover{
  text-decoration:underline;
  text-underline-offset:0.2em;
}

/* =========================================================
   09. FOOTER
========================================================= */


#footer,
#footer p,
#footer a,
#footer + hr,
hr{
  display:none !important;
}

/* =========================================================
   10. RESPONSIVE
========================================================= */

@media (max-width:760px){
  .inside-header{
    width:min(calc(100vw - 40px), var(--site-max));
    padding:22px 0;
  }

  .main-title a{
    font-size:28px;
  }

  .projects,
  .bysans-featured{
    width:min(calc(100vw - 40px), var(--site-max));
  }

  .projects-grid,
  .bysans-project-grid{
    grid-template-columns:1fr;
    gap:56px;
  }
}