@charset "UTF-8";
/* CSS Document */

/* ================= TOKENS ================= */
:root{
  --page-bg:#FF9BAD;
  --surface-bg:#F5F5F5;

  --surface-inset-x:70px;
  --surface-inset-top:100px;

  --panel-width:500px;
  --panel-offset:-80px;
  --header-height:60px;

  --menu-visible: calc(var(--panel-width) + var(--panel-offset));
  --contact-raise: 60px;
  --header-gap: 28px;

  --font-mono:"DM Mono", monospace;
  --font-menu:"Rock Salt", cursive;

  --h-logo:20px;
  --t-menu:13px;
  --t-statement:20px;

  --tracking-logo:0.02em;
  --tracking-menu:0.10em;

  --ink:#1E6114;
  --hover:#FF9AAC;
  --radius-ui:18px;

  --border-width: 105%;
  --border-max: 1600px;
  --border-top: -27px;
}

/* ================= BASE ================= */
*, *::before, *::after{ box-sizing:border-box; }

html,body{
  margin:0;
  background:var(--page-bg);
  font-family:var(--font-mono);
  color:var(--ink);
}

body{ position:relative; }

/* GRÅ flade */
body::before{
  content:"";
  position:fixed;
  left:var(--surface-inset-x);
  right:var(--surface-inset-x);
  top:var(--surface-inset-top);
  bottom:0;

  background:
    url("img/colors.background.png") center / 120% 110% no-repeat,
    var(--surface-bg);

  opacity:1;
  z-index:0;
  pointer-events:none;
}

/* PINK topmask */
body::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:var(--surface-inset-top);
  background:var(--page-bg);
  z-index:2;
  pointer-events:none;
}

.layout, main, footer{ position:relative; z-index:1; }

/* ================= HEADER ================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--surface-inset-top);
  z-index:1000;
}

.header-container{
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

header .brand{
  margin:0;
  text-align:center;
  font-family:var(--font-menu);
  font-size:var(--h-logo);
  font-weight:400;
  letter-spacing:var(--tracking-logo);
  text-transform:uppercase;
  line-height:1;
}

/* Home følger højre kant af grå flade */
.header-nav{
  position:fixed;
  right:var(--surface-inset-x);
  top:calc(var(--surface-inset-top) / 2);
  transform:translateY(-50%);
}

.header-nav a{
  font-family:var(--font-menu);
  font-size:14px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.header-nav a:hover{ color:#F5F5F5; }

/* Brand link (KRATZ DESIGN) */
.brand-link{
  color: var(--ink);
  text-decoration: none;
}

.brand-link:hover{
  color: #F5F5F5; /* samme hover som Home */
}

/* ================= LAYOUT ================= */
.layout{
  display:flex;
  padding-top:var(--surface-inset-top);
  padding-left:var(--menu-visible);
}

/* ================= LEFT MENU ================= */
.left-panel{
  position:fixed;
  top:var(--surface-inset-top);
  left:calc(var(--surface-inset-x) - 0px);
  width:var(--panel-width);
  height:calc(100vh - var(--surface-inset-top));
  margin-left:var(--panel-offset);
  background:url("https://portfolio.katrinekratz.dk/img/papir.menu.png") center/cover no-repeat;
  z-index:800;
}

.panel-inner{
  position:relative;
  width:100%;
  height:100%;
}

/* ================= MENU ILLUSTRATIONER ================= */
.illu{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:-1;
  pointer-events:none;
}

/* placeringer – RØR IKKE */
.illu-1{left:35%;top:17%;}
.illu-2{left:70%;top:42%;}
.illu-3{left:40%;top:68%;}
.illu-4{left:60%;top:89%;}

/* størrelser – RØR IKKE */
.illu-1{ width:250px; }
.illu-2{ width:270px; }
.illu-3{ width:270px; }
.illu-4{ width:310px; }

/* billeder fylder boksen */
.illu-img{
  width:100%;
  height:auto;
  display:block;
}

/* default: normal vises, pink skjult */
.illu-img.pink{ display:none; }

/* når JS sætter .is-pink */
.illu.is-pink .illu-img.normal{ display:none; }
.illu.is-pink .illu-img.pink{ display:block; }

/* ================= MENU TEKST ================= */
.text{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:var(--t-menu);
  font-weight:500;
  letter-spacing:var(--tracking-menu);
  text-transform:uppercase;
}

.text a{
  color:var(--ink);
  text-decoration:none;
  font-family:var(--font-menu);
  font-weight:400;
  letter-spacing:0.04em;
}

.text a:hover{ color:var(--hover); }
.menu-link.is-pink{ color:var(--hover); }

.text-1{top:8%;}
.text-2{top:30%;}
.text-3{top:54%;}
.text-4{top:80%;}

/* ================= ACTIVE MENU STATE (per page) ================= */

/* About page */
body.page-about .text-1 .menu-link{
  color: var(--hover);
}

/* Storyboard page */
body.page-storyboard .text-2 .menu-link{
  color: var(--hover);
}

/* Contact page */
body.page-contact .text-4 .menu-link{
  color: var(--hover);
}

/* ================= MAIN ================= */
main{ flex:1; }

.content{
  max-width:700px;
  padding: calc(var(--header-height) + var(--header-gap)) 40px 0px;
  margin:0 auto;
}

.right-column{
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}

.content p.statement{
  font-family:var(--font-mono);
  font-size:var(--t-statement);
  font-weight:500;
  line-height:1.3;
  margin:0 0 60px;
}

/* ================= WORDSEARCH ================= */
.wordsearch{
  max-width:400px;
  margin:0 auto 120px;
}

.ws-grid-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:20px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  overflow:hidden;
  background:transparent;
}

.ws-grid{
  position:absolute;
  inset:0;
  display:grid;
  gap:0;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  z-index:2;
}

.ws-cell{
  display:grid;
  place-items:center;
  background:#F5F5F5;
  font-family:var(--font-mono);
  font-size:clamp(11px, 2.4vw, 14px);
  font-weight:500;
  line-height:1;
  border-radius:0;
  border:1px solid rgba(30,97,20,.25);
  cursor:pointer;
}

.ws-cell.is-found{
  background: rgba(255,155,173,.45);
  border-color: rgba(255,155,173,.85);
}

/* ================= FOOTER ================= */
footer{
  width:100vw;
  background:none;
  padding:80px 20px 60px;
}

.footer-right{
  padding-left:var(--menu-visible);
}

.footer-inner{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.illu-contact img{
  width:360px;
  margin-bottom:-20px;
}

/* ✅ Homepage/contact shared form block */
.contact-wrap{
  width:420px;
  position:relative;
  top:calc(var(--contact-raise) * -1);
  margin:0 auto;
}

.contact-wrap input,
.contact-wrap button{
  width:100%;
  display:block;
  padding:14px;
  margin:8px 0;
  border-radius:var(--radius-ui);
  border:none;

  font-family: var(--font-mono);
  color: #1E6114;
}

.contact-wrap input::placeholder{
  font-family: var(--font-mono);
  color: #1E6114;
  opacity: 0.6;
}

.contact-wrap button{
  cursor:pointer;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.08em;

  background:#FF9AAB;
  color:#1E6114;
}

/* ================= PAPER BORDER OVERLAY ================= */
.paper-border{
  position: fixed;
  top: var(--surface-inset-top);
  left: var(--surface-inset-x);
  right: var(--surface-inset-x);
  z-index: 2000;
  pointer-events: none;
}

.paper-border img{
  position: absolute;
  top: var(--border-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--border-width);
  max-width: var(--border-max);
  height: auto;
}

/* ================= HEART OVERLAY (lagt tilbage som før) ================= */
.heart-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.35);
}

.heart-overlay.is-open{
  display:flex;
}

.heart-modal{
  position:relative;
  border-radius:24px;
  padding:18px;
  background: transparent;
}

.heart-close{
  position:absolute;
  right:8px;
  top:4px;

  width:48px;
  height:48px;
  display:grid;
  place-items:center;

  font-size:36px;
  line-height:1;

  border:0;
  background:transparent;
  color:#FF9AAC;
  cursor:pointer;

  z-index: 10;            /* ✅ vigtig */
  pointer-events: auto;   /* ✅ vigtig */
}

.heart-close:hover{
  opacity:.7;
}

.heart-wrap{
  position:relative;
  display:inline-block;
}

.heart-img{
  display:block;
  width:min(520px, 80vw);
  height:auto;
}

.heart-text{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family: var(--font-menu);
  font-size: 18px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  transform: translateY(6px);
}

/* ================= STORYBOARD GALLERY (urørt – kun stabiliseret) ================= */
body.page-storyboard .content{
  max-width: 1100px;
}

body.page-storyboard .gallery{
  margin-top: 30px;
}

body.page-storyboard .gallery-strip{
  display: flex;
  flex-direction: column;
  gap: -40px;
  padding: 0 0 10px;
  align-items: flex-start;
}

body.page-storyboard .gallery-item{
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

body.page-storyboard .gallery-item img{
  display: block;
  width: min(980px, 78vw);
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  transition: opacity .15s ease;
}

body.page-storyboard .gallery-item:hover img{
  opacity: .75;
}

body.page-storyboard .gallery-item::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 48px;
  height: 48px;
  background: url("img/loop.png") center / contain no-repeat;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

body.page-storyboard .gallery-item:hover::after{
  opacity: 1;
}

body.page-storyboard .gallery-item:focus{
  outline: none;
}

.page-storyboard .gallery-item{
  margin-left: -340px;
}

/* ================= LIGHTBOX (præcis som du har nu) ================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
}

.lightbox.is-open{
  display:block;
}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.lightbox-panel{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(1100px, 92vw);
  height:100vh;
  display:grid;
  place-items:center;
}

.lightbox-img{
  max-width:100%;
  max-height:100%;
  border-radius:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  background:#fff;
}

.lightbox-close{
  position:absolute;
  right: 10px;
  top: 6px;
  font-size: 32px;
  line-height: 1;
  border:0;
  background:transparent;
  color:#1E6114;
  cursor:pointer;
  z-index: 3;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background: transparent;
  color:#1E6114;
  font-size: 44px;
  line-height: 1;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  cursor:pointer;
  z-index: 3;
}

.lightbox-nav.prev{ left: 10px; }
.lightbox-nav.next{ right: 10px; }

.lightbox-nav:hover,
.lightbox-close:hover{
  opacity: .75;
}

/* ================= ABOUT PAGE (isolated) ================= */
body.page-about .right-column{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

body.page-about .about-text{
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  white-space: normal;
}

/* ===================================================================== */
/* ❌ REMOVED/NEUTRALIZED OLD CONTACT BLOCKS (they conflicted)            */
/* (Du behøver ikke gøre noget – de er bare ikke her længere.)           */
/* ===================================================================== */

/* ================= CONTACT PAGE (REN + matcher din contact.html) ================= */
/* Alt her rammer KUN contact-siden */
/* ================= CONTACT PAGE (REN + matcher designet) ================= */
body.page-contact .right-column{
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;   /* ✅ tekst venstrestillet */
}

body.page-contact .contact-block{
  margin: 0 0 34px;
}

body.page-contact .contact-title{
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

body.page-contact .contact-line{
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 15px;
}

body.page-contact .contact-line a{
  color: inherit;
  text-decoration: none;
}
body.page-contact .contact-line a:hover{
  color: var(--hover);
}

/* ✅ SOCIAL: centreret + tydelig “hvid boks” */
body.page-contact .social-row{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start; /* ← flugter til venstre */
  margin-top: 8px;
}

body.page-contact .social-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;

  background:#fff;                     /* hvid boks */
  border:1px solid rgba(30,97,20,.25); /* diskret kant */
  color:#1E6114;

  text-decoration:none;
  font-family: var(--font-mono);
  font-weight:600;

  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
body.page-contact .social-icon:hover{
  opacity:.85;
}

/* ✅ CONTACT FORM: brug homepage-look (contact-wrap) men flyt den ned */
body.page-contact .page-contact-form{
  margin-top: 250px; /* 👈 ryk længere ned (prøv 80 / 140 / 180) */
}