:root{
  --bg:#151515; --bg2:#1d1d1d; --panel:#222; --text:#eeeae3; --muted:#9b9a96;
  --line:rgba(238,234,227,.14); --max:1440px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}

body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:Manrope,Arial,sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}

  .parallax-bg{
  position:fixed;
  top:-20%;
  right:0;
  bottom:-20%;
  left:0;
  z-index:-2;
  overflow:hidden;
  background:#0b1015;
}

.parallax-landscape{
  position:absolute;
  inset:-8%;
  background-image:url("assets/images/portfolio-background-dark.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  will-change:transform;
  transform:translate3d(0,0,0) scale(1.04);
}

a{color:inherit;text-decoration:none}.mono{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.08em}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.site-header{position:fixed;z-index:10;top:0;left:0;right:0;height:82px;padding:22px 4vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(var(--bg),transparent);backdrop-filter:blur(4px)}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  font-family:Manrope, Arial, sans-serif;
  font-weight:800;
  letter-spacing:.05em;
  font-size:13px;
  line-height:1;
}

.brand img{
  display:block;
  width:48px;
  height:48px;
  object-fit:contain;
  flex:none;
}

.brand-text{
  display:flex;
  flex-direction:column;
  flex:none;
}

.brand-text span{
  display:block;
  font-family:Manrope, Arial, sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
}

.brand small{
  display:block;
  font-family:"DM Mono", monospace;
  font-size:10px;
  font-weight:400;
  line-height:1.1;
  color:var(--muted);
  margin-top:3px;
}

nav{display:flex;gap:28px;align-items:center;font:10px "DM Mono";letter-spacing:.08em}nav a{color:#d2d0cb}nav a:hover{color:white}.resume{border:1px solid var(--line);padding:10px 14px}

nav .resume + .resume{
  margin-left:-14px;
}

nav a[href="#hobbies"]{
  display:none;
}

.hero{min-height:100vh;padding:150px 7vw 50px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;background:linear-gradient(to bottom,rgba(8,11,14,.08),rgba(8,11,14,.04) 55%,rgba(8,11,14,.14))}
.hero-index{color:var(--muted)}.hero-copy{max-width:1050px}.eyebrow{font:11px "DM Mono";letter-spacing:.1em;color:var(--muted);margin-bottom:30px}
h1{font-size:clamp(64px,9.2vw,150px);line-height:.86;letter-spacing:-.065em;margin:0;font-weight:700}h1 em{font-style:normal;color:#aaa7a0}
.hero-sub{max-width:540px;font-size:16px;color:#b9b7b2;margin:40px 0 0 1vw}.scroll-note{color:var(--muted)}

.section{
  padding:120px 7vw;
  border-bottom:1px solid var(--line);
  background:transparent;
}

.section-head{display:flex;justify-content:space-between;gap:60px;margin-bottom:65px}.section-head>div{display:flex;gap:18px;align-items:flex-start}.section-no{color:var(--muted);padding-top:7px}.section h2,.dark-section h2{font-size:clamp(34px,4.5vw,72px);letter-spacing:-.055em;line-height:.95;margin:0}.section-head p{max-width:380px;color:var(--muted);margin:0}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 28px}

.project-card{
  display:block;
  transition:transform .3s ease;
}

.project-image{aspect-ratio:16/10;background:#292929;border:1px solid var(--line);position:relative;overflow:hidden}.project-image:after{content:"PROJECT IMAGE";position:absolute;inset:0;display:grid;place-items:center;color:#777;font:11px "DM Mono";letter-spacing:.12em}

.project-card:hover{
  transform:scale(1.010);
}

.project-image{background:#303030}.project-info{padding-top:18px;display:flex;justify-content:space-between;gap:20px}.project-title{font-size:22px;font-weight:600}.project-meta{font:10px "DM Mono";color:var(--muted);text-align:right;line-height:1.8}
.dark-section{padding:140px 7vw;background:rgba(29,29,29,.20);border-bottom:1px solid var(--line)}.statement h2{margin-top:55px;max-width:1050px}.statement h2 span{color:#8f8d88}.statement p{max-width:510px;color:var(--muted);margin-top:55px;font-size:16px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;background:var(--line)}.metric{background:rgba(18,20,22,.28);padding:80px 7vw}.metric strong{display:block;font-size:clamp(55px,7vw,110px);letter-spacing:-.07em}.metric span{font:10px "DM Mono";color:var(--muted)}

.capabilities .section-head{
  border-bottom:none;
  padding-bottom:60px;
}

.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.cap-grid>div{border-top:1px solid var(--line);padding-top:18px}.cap-grid span{color:var(--muted)}.cap-grid h3{font-size:16px;margin:35px 0 18px}.cap-grid p{color:var(--muted);font-size:13px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.placeholder{display:grid;place-items:center;color:#777;background:#292929;border:1px solid var(--line);font:11px "DM Mono";letter-spacing:.1em}.portrait{aspect-ratio:4/5}

.portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-copy .large{font-size:clamp(26px,3vw,48px);line-height:1.05;letter-spacing:-.035em;margin:0 0 40px}.about-copy>p:not(.large){color:var(--muted);max-width:560px}.text-link{display:inline-block;margin-top:35px;border-bottom:1px solid #777;padding-bottom:6px;font:10px "DM Mono"}
.hobby-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,220px);gap:8px}.hobby{font-size:12px;transition:transform .3s}.hobby:hover{transform:scale(.99);background:#303030}.hobby.tall{grid-column:1;grid-row:1 / span 2}

.contact{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.contact-number{
  color:var(--muted);
  margin-bottom:55px;
}

.contact-buttons{
  width:min(100%, 1000px);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:30px;
}

.document-button{
  min-height:115px;
  padding:30px 42px;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  position:relative;
  overflow:hidden;
  font-family:"DM Mono", monospace;
  font-size:16px;
  letter-spacing:.1em;
  color:#aaa;
  background:rgba(255,255,255,.015);
  transition:
    color .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.button-copy{
  grid-column:2;
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}

.button-copy > span{
  font-family:"DM Mono", monospace;
  font-size:16px;
  letter-spacing:.1em;
  line-height:1.2;
}

.button-copy small{
  display:block;
  font-family:"DM Mono", monospace;
  font-size:10px;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.4;
  color:#777;
  white-space:nowrap;
}

.document-button .button-arrow{
  grid-column:3;
  justify-self:end;
}

.document-button:hover{
  color:#fff;
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.055);
  box-shadow:
    0 0 10px rgba(255,255,255,.12),
    0 0 25px rgba(255,255,255,.10),
    0 0 50px rgba(255,255,255,.07),
    inset 0 0 25px rgba(255,255,255,.04);
  transform:translateY(-2px);
}

.document-button:hover .button-copy > span{
  text-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 18px rgba(255,255,255,.15);
}

.document-button:hover .button-copy small{
  color:#aaa;
}

.button-arrow{
  font-size:22px;
  transition:transform .3s ease,text-shadow .3s ease;
}

.document-button:hover .button-arrow{
  transform:translate(3px,-3px);
  text-shadow:0 0 8px rgba(255,255,255,.35);
}

footer{
  padding:30px 7vw;
  background:transparent;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px;
}

footer strong{display:block;color:var(--text);font-size:12px}footer span{font:9px "DM Mono"}

/* PASSWORD PROTECTED DOCUMENT PAGE */

.locked-page{
  min-height:100vh;
  margin:0;
  background:#111417;
}

.locked-brand{
  position:fixed;
  top:17px;
  left:4vw;

  display:flex;
  align-items:center;
  gap:12px;

  font-family:Manrope, Arial, sans-serif;
  font-weight:800;
  letter-spacing:.05em;
  font-size:13px;
  line-height:1;

  z-index:10;
}

.locked-brand img{
  display:block;
  width:48px;
  height:48px;
  object-fit:contain;
  flex:none;
}

.locked-brand-text{
  display:flex;
  flex-direction:column;
  flex:none;
}

.locked-brand-text span{
  display:block;
  font-family:Manrope, Arial, sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
}

.locked-brand small{
  display:block;
  font-family:"DM Mono", monospace;
  font-size:10px;
  font-weight:400;
  line-height:1.1;
  color:var(--muted);
  margin-top:3px;
}

.password-screen{
  width:100%;
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:40px;
}

.password-container{
  width:440px;
  max-width:90vw;

  margin:0 auto;
  text-align:center;
}

.locked-back{
  display:block;

  width:100%;

  margin:0 0 28px 0;

  text-align:left;

  font:10px "DM Mono";
  color:var(--muted);
  letter-spacing:.08em;

  transition:
    color .25s ease,
    text-shadow .25s ease;
}

.locked-back:hover{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.3);
}

.password-label{
  color:#d2d0cb;
  margin-bottom:22px;

  text-align:center;

  letter-spacing:.14em;
}

.password-input{
  display:block;

  width:100%;
  height:64px;

  border:1px solid rgba(238,234,227,.25);
  outline:none;

  background:rgba(255,255,255,.02);
  color:#fff;

  text-align:center;

  font-family:"DM Mono", monospace;
  font-size:22px;
  letter-spacing:.15em;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.password-input:focus{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.035);

  box-shadow:
    0 0 20px rgba(255,255,255,.06);
}

.password-error{
  height:20px;
  margin-top:16px;

  opacity:0;

  color:#999;

  font-family:"DM Mono", monospace;
  font-size:10px;
  letter-spacing:.1em;

  transition:opacity .2s ease;
}

.password-error.show{
  opacity:1;
}

@media(max-width:800px){.site-header{height:70px;padding:18px 5vw}
.brand small{display:none}nav{gap:12px}nav a:nth-child(3),nav a:nth-child(4){display:none}
.hero{padding:120px 6vw 35px}.section,.dark-section{padding:85px 6vw}.section-head{display:block;margin-bottom:45px}.section-head p{margin-top:20px}.project-grid,.about-grid,.cap-grid{grid-template-columns:1fr}.project-grid{gap:55px}.metrics{grid-template-columns:1fr}.metric{padding:55px 6vw}.hobby-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,180px)}.hobby.tall{grid-column:1;grid-row:1 / span 2}footer{padding:25px 6vw}.contact h2{font-size:18vw}}

/* =========================================
   PASSWORD PAGE RJN LOGO
   ========================================= */

.locked-page{
  --locked-logo-opacity:.10;
}

.password-container{
  position:relative;
}

/* Large RJN logo above the password area */
.password-container::before{
  content:"";
  position:absolute;

  left:50%;
  bottom:calc(100% + 8px);

  width:320px;
  height:320px;

  transform:translateX(-50%);

  background-image:url("assets/images/brand/RJN_Logo_White.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:var(--locked-logo-opacity);

  pointer-events:none;
}

.project-image::after{
  display:none;
  content:none;
}

/* Remove horizontal dividers between homepage sections */
.hero,
.section,
.dark-section{
  border-bottom:none !important;
}