:root{
  --bg:#fff;
  --fg:#000;
  --muted:rgba(0,0,0,.35);
  --font:ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap:16vw;
}

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  overflow-x:hidden;
}

/* ---------- INTRO SCROLL ZONE ---------- */
.scrollZone{
  height:300vh;
  position:relative;
}

.stage{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  place-items:center;
}

.type{
  position:relative;
  width:min(1400px, 96vw);
  height:1.2em;
}

.type__line{
  margin:0;
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  font-size:clamp(48px, 9vw, 140px);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transform:translateY(0);
  filter:blur(0);
  will-change:opacity, transform;
}

.left{
  justify-self:end;
  padding-right:var(--gap);
}

.right{
  justify-self:start;
  padding-left:var(--gap);
}

.plus{
  justify-self:center;
  transform:translateY(-0.02em);
}

/* ---------- PORTFOLIO PAGE ---------- */
.onePage{
  --one-bg:#ffffff;
  --one-fg:#000000;
  --one-line:rgba(0,0,0,.12);
  --one-card:#f0f0f0;

  min-height:100vh;
  background:var(--one-bg);
  color:var(--one-fg);
  position:relative;
}

.onePage.is-dark{
  --one-bg:#000000;
  --one-fg:#ffffff;
  --one-line:rgba(255,255,255,.18);
  --one-card:#111111;
}

.oneTop{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--one-bg);
  padding:24px 28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  font-size:14px;
}

.oneTop__left{
  font-weight:600;
}

.oneTop__right{
  justify-self:end;
  display:inline-flex;
  gap:18px;
  font-weight:600;
}

.navLink{
  color:var(--one-fg);
  text-decoration:none;
  opacity:.8;
}

.navLink.is-active{
  opacity:1;
}

.modeBtn{
  justify-self:center;
  background:transparent;
  color:var(--one-fg);
  border:1px solid var(--one-line);
  border-radius:999px;
  padding:10px 14px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}

.modeBtn:hover{
  transform:translateY(-1px);
  background:color-mix(in oklab, var(--one-fg) 8%, transparent);
}

/* ---------- portfolio list ---------- */
.portfolioMain{
  width:min(1000px, calc(100vw - 56px));
  margin:0 auto;
  padding:20px 0 120px;
}

.projectCard{
  margin-bottom:72px;
}

.projectLink{
  color:var(--one-fg);
  text-decoration:none;
  display:block;
}

.projectImageWrap{
  width:100%;
  background:var(--one-card);
  overflow:hidden;
}

.projectImage{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.projectMeta{
  padding-top:16px;
}

.projectTitle{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.08;
  color:var(--one-fg);
}

.projectType{
  margin:6px 0 2px 0;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:rgba(0,0,0,.6);
}

.projectYear{
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.02em;
  color:rgba(0,0,0,.6);
}

.onePage.is-dark .projectType,
.onePage.is-dark .projectYear{
  color:rgba(255,255,255,.6);
}

.projectLink:hover .projectTitle,
.projectLink:hover .projectType,
.projectLink:hover .projectYear{
  opacity:.82;
}

/* ---------- footer ---------- */
.oneBottom{
  padding:0 28px 22px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  font-size:14px;
  color:var(--one-fg);
}

.oneBottom .footLink:last-child{
  justify-self:end;
}

.footLink{
  color:var(--one-fg);
  text-decoration:none;
  white-space:nowrap;
}

.footLink:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.footCenter{
  justify-self:center;
  white-space:nowrap;
}

/* ---------- mobile ---------- */
@media (max-width:700px){

  .type{
    width:calc(100vw - 32px);
  }

  .type__line{
    font-size:clamp(30px, 11vw, 60px);
  }

  .oneTop{
    top:0;
    padding:16px;
    grid-template-columns:auto auto auto;
    align-items:center;
    gap:8px;
    font-size:12px;
  }

  .oneTop__left{
    white-space:nowrap;
  }

  .oneTop__right{
    gap:8px;
    white-space:nowrap;
  }

  .modeBtn{
    padding:6px 10px;
    font-size:12px;
  }

  .portfolioMain{
    width:calc(100vw - 32px);
    padding:14px 0 72px;
  }

  .projectCard{
    margin-bottom:56px;
  }

  .projectMeta{
    padding-top:14px;
  }

 .projectTitle{
  font-size:14px;
  font-weight:600;
  line-height:1.05;
}

.projectType{
  margin:4px 0 0 0;
  font-size:12px;
  line-height:1.15;
}

.projectYear{
  font-size:12px;
  line-height:1.15;
}

  .oneBottom{
    left:16px;
    right:16px;
    bottom:16px;
    padding:0 16px 16px;
    font-size:12px;
    grid-template-columns:auto 1fr auto;
    column-gap:8px;
  }

  .footCenter{
    text-align:center;
    font-size:11px;
  }
}