```css
/* =========================================================
   1. 全站基础变量
   ========================================================= */

/* 
   --sidebar-width：左侧导览栏的宽度。
   数值越大，右侧内容会越靠右。
*/
:root {
  --sidebar-width: 218px;

  /* 全站主要文字颜色 */
  --ink: #111111;

  /* 较浅的辅助文字颜色 */
  --muted: #6f6f6f;

  /* 网页背景颜色 */
  --paper: #ffffff;

  /* 预留的浅灰线条颜色 */
  --line: #d9d9d9;
}


/* =========================================================
   2. 全站通用设置
   ========================================================= */

/* 让元素的宽高计算包含 padding 和 border */
* {
  box-sizing: border-box;
}

/* 清除浏览器默认边距，并设定页面颜色 */
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}

/* 全站默认字体、字号和行距 */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  line-height: 1.35;
}

/* 所有链接默认不显示下划线 */
a {
  color: inherit;
  text-decoration: none;
}

/* 
   鼠标悬停、键盘选中、访问过的链接：
   都保持原本颜色，并取消下划线。
*/
a:hover,
a:focus,
a:visited {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   3. 页面整体结构
   ========================================================= */

/* 整个网页至少占满浏览器高度 */
.layout {
  min-height: 100vh;
}


/* =========================================================
   4. 左侧固定导览栏
   ========================================================= */

/* 
   左侧栏固定在浏览器左边，不随右侧内容滚动。

   padding 的四个数值顺序：
   上、右、下、左

   42px：菜单距离浏览器顶部的距离
   24px：右侧留白
   34px：底部留白
   28px：菜单距离浏览器左边的距离
*/
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 42px 24px 34px 28px;
  background: var(--paper);
  z-index: 100;
}


/* =========================================================
   5. 艺术家姓名
   ========================================================= */

/* 
   如果 HTML 中仍有 class="artist-name" 的姓名，
   这一段控制姓名的样式。
*/
.artist-name {
  display: block;
  width: max-content;

  /* 姓名下方与菜单之间的距离 */
  margin: 0 0 58px;

  /* 姓名字号 */
  font-size: 30px;

  /* 700 为粗体；400 为普通字重 */
  font-weight: 700;

  /* 字母之间的间距 */
  letter-spacing: 1.95px;

  /* 自动转换为大写 */
  text-transform: uppercase;
}


/* =========================================================
   6. 左侧菜单整体
   ========================================================= */

/* 
   菜单项目从上到下排列。

   gap：Works、Photography 等项目之间的距离。
   数值越大，菜单各项之间越疏。
*/
.navigation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 
   左侧菜单每一个链接的文字样式。
   例如 Works、Photography、RIbesBooks、Biograohy。
*/
.navigation a {
  width: max-content;

  /* 菜单字体 */
  font-family: Arial, Helvetica, sans-serif;

  /* 菜单字号 */
  font-size: 25px;

  /* 400 为普通字重；700 为粗体 */
  font-weight: 400;

  /* 每行文字的高度 */
  line-height: 1.2;

  /* 字母间距；0 表示不额外拉开 */
  letter-spacing: 0;

  /* 保留 HTML 中原本输入的大小写 */
  text-transform: none;

  /* 菜单文字颜色 */
  color: #000000;

  /* 取消链接默认下划线 */
  text-decoration: none;

  /* 取消可能存在的底部边线 */
  border-bottom: none;
}

/* 
   当前所在页面的菜单项：
   不显示下划线。
*/
.navigation a[aria-current="page"] {
  text-decoration: none;
  border-bottom: none;
}


/* =========================================================
   7. 右侧主要内容区域
   ========================================================= */

/* 
   margin-left 必须与左栏宽度一致，
   否则右侧内容会压到菜单下面。
*/
.main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);

  /*
     padding 顺序：上、右、下、左
     可调整右侧内容距离左栏、右侧和顶部的位置。
  */
  padding: 38px 62px 80px 34px;
}


/* =========================================================
   8. 首页内容
   ========================================================= */

/* 首页内容区域占据接近整屏高度，并贴近底部 */
.home {
  min-height: calc(100vh - 118px);
  display: grid;
  align-items: end;
}

/* 首页底部的小型说明文字 */
.home-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}


/* =========================================================
   9. 普通页面标题与文字
   ========================================================= */

/* 文章、Biography、Works 等页面内容最大宽度 */
.page {
  max-width: 920px;
}

/* 页面标题，例如 “Works” */
.page-heading {
  margin: 0 0 48px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* =========================================================
   10. Works 作品列表
   ========================================================= */

/* 
   作品列表：
   左列为年份，右列为作品标题和信息。
*/
.works-list {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);

  /*
     gap 的两个数值：
     10px：上下两行之间的距离
     30px：年份与标题之间的距离
  */
  gap: 10px 30px;
  max-width: 760px;
}

/* 作品年份文字加粗 */
.work-year {
  font-weight: 700;
}

/* 每个作品标题所在行 */
.work-title {
  display: flex;
  justify-content: space-between;
  gap: 24px;

  /*
     默认没有底线。
     这里保留透明边框是为了鼠标悬停时页面不跳动。
  */
  border-bottom: 1px solid transparent;
}

/* 
   鼠标移到作品标题时出现横线。
   若你希望作品标题也完全没有横线，
   删除这一整个区块即可。
*/
.work-title:hover {
  border-bottom-color: var(--ink);
}

/* 作品标题右侧的辅助信息，例如媒介或尺寸 */
.work-title span:last-child {
  color: var(--muted);
  white-space: nowrap;
}


/* =========================================================
   11. 正文内容
   ========================================================= */

/* 正文最大宽度 */
.copy {
  max-width: 580px;
}

/* 每一个段落下方的距离 */
.copy p {
  margin: 0 0 14px;
}

/* 正文中 strong 标签的粗体样式 */
.copy strong {
  font-weight: 700;
}

/* 占位说明文字颜色 */
.placeholder-note {
  color: var(--muted);
}


/* =========================================================
   12. 手机端样式
   当浏览器宽度小于 760px 时自动生效。
   ========================================================= */
@media (max-width: 760px) {

  /* 
     手机上左栏不再固定在左侧，
     而是出现在页面顶部。
  */
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: 24px 20px 20px;
  }

  /* 手机上姓名与菜单之间的距离 */
  .artist-name {
    margin-bottom: 26px;
  }

  /* 手机上菜单改为两列排列 */
  .navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  /* 手机上右侧内容不再需要为左栏留空间 */
  .main {
    margin-left: 0;
    padding: 42px 20px 56px;
  }

  /* 首页在手机上的高度 */
  .home {
    min-height: calc(100vh - 210px);
  }

  /* 手机上作品列表的年份列稍微变窄 */
  .works-list {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 9px 18px;
  }

  /* 手机上标题两侧之间的距离缩小 */
  .work-title {
    gap: 12px;
  }
}
```