@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;500&display=swap');

:root{
  --c1:#FBEED7;
  --c2:#D9C19D;
  --c3:#B7966B;
  --c4:#946D43;
  --c5:#724A24;
  --c6:#502B0F;
  --c7:#2E1402;
  --section:#FBEED7;

  --tartan:
  linear-gradient(90deg,transparent 10%,rgba(183,150,107,.35) 10%,rgba(183,150,107,.35) 20%,transparent 20%,transparent 22%,rgba(80,43,15,.45) 22%,rgba(80,43,15,.45) 32%,transparent 32%,transparent 62%,rgba(148,109,67,.4) 62%,rgba(148,109,67,.4) 64%,transparent 64%,transparent 66%,rgba(80,43,15,.5) 66%,rgba(80,43,15,.5) 68%,transparent 68%,transparent 70%,rgba(183,150,107,.35) 70%,rgba(183,150,107,.35) 80%,transparent 80%,transparent 82%,rgba(80,43,15,.45) 82%,rgba(80,43,15,.45) 84%,transparent 84%,transparent 86%,rgba(148,109,67,.4) 86%,rgba(148,109,67,.4) 88%,transparent 88%),
  linear-gradient(transparent 10%,rgba(183,150,107,.35) 10%,rgba(183,150,107,.35) 20%,transparent 20%,transparent 22%,rgba(80,43,15,.45) 22%,rgba(80,43,15,.45) 32%,transparent 32%,transparent 62%,rgba(148,109,67,.4) 62%,rgba(148,109,67,.4) 64%,transparent 64%,transparent 66%,rgba(80,43,15,.5) 66%,rgba(80,43,15,.5) 68%,transparent 68%,transparent 70%,rgba(183,150,107,.35) 70%,rgba(183,150,107,.35) 80%,transparent 80%,transparent 82%,rgba(80,43,15,.45) 82%,rgba(80,43,15,.45) 84%,transparent 84%,transparent 86%,rgba(148,109,67,.4) 86%,rgba(148,109,67,.4) 88%,transparent 88%),
  linear-gradient(transparent 0%,rgba(217,193,157,.35) 0%,rgba(217,193,157,.35) 6%,transparent 6%,transparent 36%,rgba(183,150,107,.35) 36%,rgba(183,150,107,.35) 46%,transparent 46%,transparent 48%,rgba(217,193,157,.35) 48%,rgba(217,193,157,.35) 58%,transparent 58%,transparent 92%,rgba(183,150,107,.35) 92%,rgba(183,150,107,.35) 98%,transparent 98%),
  linear-gradient(90deg,transparent 0%,rgba(217,193,157,.35) 0%,rgba(217,193,157,.35) 6%,transparent 6%,transparent 36%,rgba(183,150,107,.35) 36%,rgba(183,150,107,.35) 46%,transparent 46%,transparent 48%,rgba(217,193,157,.35) 48%,rgba(217,193,157,.35) 58%,transparent 58%,transparent 92%,rgba(183,150,107,.35) 92%,rgba(183,150,107,.35) 98%,transparent 98%);
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:'Fira Sans Condensed', sans-serif;
  color:var(--c7);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--c7);
  background-image:var(--tartan);
  background-size:520px 520px;
  overflow-x:hidden;
}

/* HEADER */
header{
  background:var(--section);
  padding:18px 40px;
}

.header-inner{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
}

/* LEFT: J.AI */
.logo{
  justify-self:start;
  font-weight:600;
  font-size:1.1rem;
  padding-left:20px; /* move slightly more left */
}

/* CENTER: NAV */
nav{
  display:flex;
  gap:34px;
  justify-content:center;
}

nav a{
  text-decoration:none;
  color:var(--c6);
  font-weight:500;
}

/* RIGHT: SEARCH */
.search{
  justify-self:end;
  width:170px;
  border:1px solid var(--c3);
  padding:8px 14px;
  border-radius:20px;
  background:white;
  font-family:inherit;
  padding-left:20px; /* move slightly more right */
}

.search:focus{
  outline:none;
  border-color:var(--c5);
  box-shadow:0 0 0 3px rgba(148,109,67,.2);
}

/* SECTIONS */
section{
  position:relative;
  background:var(--section);
  width:min(900px,90%);
  margin:60px auto;
  padding:60px;
  border-radius:6px;
  text-align:center;
  overflow:hidden;
}

section h2{
  margin-bottom:20px;
  font-size:28px;
}

/* ICONS */
.icons{
  display:flex;
  justify-content:center;
  gap:32px;
  margin-top:25px;
  font-size:28px;
}

.icons a{
  display:flex;
  align-items:center;
  justify-content:center;
  color:black;
  transition:.2s ease;
}

.icons a:hover{
  transform:translateY(-3px);
  opacity:.7;
}

.icons svg{
  height:28px;
  width:auto;
}

/* FOOTER */
footer{
  background:var(--section);
  padding:26px;
  text-align:center;
}

/* TARTAN GLOW */
.tartan-glow {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  background-image: var(--tartan);
  background-size:520px 520px;
  background-position:0 0;
  opacity:0;
  transition: opacity .15s ease;

  mask-image: radial-gradient(
    circle 110px at var(--mx,0px) var(--my,0px),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.8) 40%,
    rgba(0,0,0,.3) 65%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: radial-gradient(
    circle 110px at var(--mx,0px) var(--my,0px),
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.8) 40%,
    rgba(0,0,0,.3) 65%,
    rgba(0,0,0,0) 100%
  );
}