:root {
    --bg: #000000;
    --rail: #000000;
    --fg: #f0f0f0;
    --pink: #BF6396;
    --pink2: #D98FB1;
    --border: #000000;
    --rail-w: 1080px;
    --left-w: 260px;
    --gap: 20px;
    --row: 8px;
    --page-pad: 45px;
    /* grid row size for desktop composition */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family:sans-serif;
    line-height: 1.55;
     padding-top: 60px;
    
}

/* header */
.navwrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--page-pad);
    border-bottom: 1px solid var(--border);
    background: rgba(18,18,18,.85);
    backdrop-filter: blur(6px);
    z-index: 50;
}

.brand{
  position: relative;
  display: inline-block;
  width: 50px;  
  height: 50px;
}
.brand img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.logo-default{
  opacity: 1;
}

.logo-hover{
  opacity: 0;
}

.brand:hover .logo-default{
  opacity: 0;
}

.brand:hover .logo-hover{
  opacity: 1;
}

.nav a {
    color: var(--pink2);
    text-decoration: underline;
    margin-left: 16px;
    font-size: 14px;
}

.nav a.active,
.nav a:hover {
    color: var(--fg);
}

/* rail layout */
.rail {
    color: var(--pink2);
    padding: 24px var(--page-pad) 48px;
    border-left: 1px solid var(--border);
}

.rail p {
  margin: 0;
  
  font-size: 13px;
  line-height: 1.4;
}
.rail a {
  color: var(--pink2);
}

.hero {
    
    margin: 24px 0 0;
    padding: 8px var(--page-pad);
    color: var(--pink2);
}

.about {
    margin: 56px auto;
    max-width: var(--rail-w);
    color: var(--pink);
    
    font-size: 13px;
    line-height: 1.4;
}

.entry {
    margin: 56px auto;
    max-width: var(--rail-w);
    color: var(--pink);
    text-decoration: underline;
    font-size: 13px;
    line-height: 1.4;
}

.year {
    display: block;
    margin-top: 15px;
    color: var(--pink2);
    text-decoration: underline;
}

.ske1 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin: 60px 0;
  align-items: start;
}
.img-frame {
  width: 60%;
  justify-self: end;
}

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

.ske3{
  display: grid;
  grid-template-columns: 280px 1fr;
  
  gap: 25px 40px;
  margin: 60px 0;
  align-items: start;
}

.ske4{
display: grid;
grid-template-columns: 280px 1fr;
margin: 100px 0;
align-items: start;
}
.ske5{
display: grid;
 align-items: start;
 grid-template-columns: 280px 1fr;
 
 margin: 40px 0;
gap: 40px; 
}
.ske6{
display: grid;
 align-items: start;
 grid-template-columns: 280px 1fr;
 
 margin: 100px 0;
 gap: 40px; 
}
.hi{
   display: flex;
  flex-direction: column;
}
.hi2{
    grid-area:2 / 1 / 3 / 2;
    width: 100%;
}
.hi3{
    width: 100%;
}
.tem{
     grid-column: 1;
  grid-row: 1;
}
.hiimg{
  width: 70%;
  height: auto;
  display: block;
  justify-self: end;
  align-self: end; 
}
.hi1{
   width:190%;
   height:auto; 
   justify-self: end;
   align-self: start;   
   margin-top: 215px;
}

.seoul{
     grid-area: 1 / 1 ;
}
.seoulimg {
   justify-self: end;
  align-self: start;
  width: 60%;
  height: auto;
  display: block;
  
}

.project-1 {
  width: 60%;
  height: auto;
  justify-self: end;
}

.ske3-pics{
    grid-column: 2;
  display: grid;
  gap: 20px;
  width: 60%;
  justify-self: end;

}
.AGROS{
  grid-column: 1;
  grid-row: 1;
}
.top{
     width: 100%;
  
}
.top img {
  width: 100%;
  height: auto;
  display: block;
}
.temple1 {
  
  height: 300px;
  
  
}

.temple2 {
  
  width: 70%;
  height: 300px;
  object-fit: cover;
  justify-self: end;
}

.AGRO1{

  height: 450px;
  object-fit: cover;
}

.AGRO2{
   width: 95%;
  height: 450px;
  object-fit: cover;
  justify-self: end;
}

/*
.ske2 {
display: grid;
  grid-template-columns: 1fr 450px;
  margin: 50px 0;
  padding-left: 30px;
  padding-right: 30px;
  
}
.riverside-images {
  width: 360px;
  justify-self: end;
}

.main {
  width: 100%;
  display: block;
  margin-bottom: 12px;
}
.small-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.small{
     width: 100%;
  display: block;
}
.small1{
     width: 100%;
  display: block;
}
*/

h3{
  font-size: 15px;
  text-decoration: underline;
  margin: 0;

}
footer{
    color: var(--pink2);
    text-align: center;
}
.menu-btn {
  display: none;
  font-size: 20px;
  color: var(--pink2);
  cursor: pointer;
}

/* media layout */
.media {
    display: grid;
    gap: var(--gap);
}

/* mobile first: simple stacked aspect-ratio boxes */
.figure {
    position: relative;
    width: 100%;
    border: 1px solid var(--border);
    background: #0d0d0d;
}

.figure .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio-wide {
    aspect-ratio: 16/9;
}

.ratio-square {
    aspect-ratio: 1/1;
}

.ratio-tall {
    aspect-ratio: 3/4;
}

/* desktop: compositional grid with fine control */
@media (min-width:769px){

  
    .media.desktop-grid {
        display: grid;
        grid-template-columns: repeat(12,1fr);
        grid-auto-rows: var(--row);
        position: relative;
    }

    .item {
        position: relative;
        border: 1px solid var(--border);
        background: #000000;
        overflow: hidden;
        grid-area: 1 / 1 / 27 / 1;
    }

    .item .img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rot90 {
        transform: rotate(90deg);
        transform-origin: center;
    }

    .rot180 {
        transform: rotate(180deg);
        transform-origin: center;
    }

    .lift-10 {
        transform: translateY(-10px);
    }

    .lift-20 {
        transform: translateY(-20px);
    }

    .push-10 {
        transform: translateX(10px);
    }

    .pull-10 {
        transform: translateX(-10px);
    }
}

/* small screen */
@media (max-width: 768px) {
  :root {
    --page-pad: 16px;
  }

  .navwrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero,
  .rail {
    padding-left: 16px;
    padding-right: 16px;
  }

  .menu-btn {
    display: block;
  }

  .nav {
    position: absolute;
    top: 50px;
    right: 16px;
    background: #111;
    display: none;
    flex-direction: column;
    padding: 16px;
  }

  .nav.show {
    display: flex;
  }

  /* work / sketch 單欄 */
  .ske1,
  .ske3,
  .ske4,
  .ske5,
  .ske6 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 40px 0;
    align-items: start;
  }

  /* 左右欄定位取消 */
  .AGROS,
  .tem,
  .hi,
  .seoul,
  .ske3-pics,
  .hi2,
  .hi3 {
    grid-column: auto;
    grid-row: auto;
    grid-area: auto;
  }

  /* 圖片滿寬往下排 */
  .img-frame,
  .project-1,
  .ske3-pics,
  .seoulimg,
  .hiimg,
  .templeimg,
  .temple1,
  .temple2,
  .AGRO1,
  .AGRO2,
  .hi1,
  .hi2,
  .hi3 {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    justify-self: stretch;
    align-self: auto;
    margin-top: 0;
  }

  /* 原本桌機高度取消 */
  .temple1,
  .temple2,
  .AGRO1,
  .AGRO2 {
    height: auto;
    object-fit: contain;
  }

  /* hi1 手機不要放大 */
  .hi1 {
    width: 100%;
    margin-top: 20px;
  }

  /* 每張圖之間留空隙 */
  .img-frame,
  .ske3-pics,
  .project-1,
  .seoulimg,
  .templeimg,
  .temple1,
  .temple2,
  .AGRO1,
  .AGRO2,
  .hi1,
  .hiimg,
  .hi2,
  .hi3 {
    margin-bottom: 20px;
  }img {
    /* Disables the pop-up menu when long-pressing an image on iOS/Safari */
    -webkit-touch-callout: none;
    
    /* Prevents the user from selecting the image like text */
    -webkit-user-select: none;
    user-select: none;
    
    /* Disables the default tap highlight behavior on mobile */
    -webkit-tap-highlight-color: transparent;
}
}