:root{--bg:#f3f4f1;--ink:#0f1010;--soft:#3a3d3a;--muted:#686b66;--line:#dfe1dc;--line-soft:rgba(15,16,16,.075);--blue:#2346ff;--sans:"Inter","Helvetica Neue","PingFang SC",Arial,sans-serif}
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1440px;margin:0 auto;padding:0 64px}
  .topbar{position:sticky;top:0;z-index:100;background:rgba(243,244,241,.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .topbar-inner{max-width:1440px;margin:0 auto;padding:0 64px;height:60px;display:flex;align-items:center;justify-content:space-between}
  .mark{display:flex;align-items:center;gap:10px}
  .mark strong{font-size:15px;font-weight:600;letter-spacing:-.02em}
  .mark i{width:6px;height:6px;background:var(--blue);display:block}
  .mark span{font-size:8.5px;letter-spacing:.18em;color:var(--muted)}
  nav{display:flex;gap:24px;font-size:11px;letter-spacing:.02em;color:var(--soft)}
  nav a{padding-bottom:3px;border-bottom:1px solid transparent}
  nav a:hover{color:var(--blue);border-color:var(--blue)}
  nav a.on{border-color:var(--ink)}
  nav sup{font-size:8px;color:var(--muted);margin-left:3px;vertical-align:super}
  .head{max-width:1440px;margin:0 auto;padding:52px 64px 34px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:end}
  .eyebrow{font-size:9px;letter-spacing:.16em;color:var(--muted);margin-bottom:14px}
  .eyebrow b{color:var(--blue);font-weight:500;margin-right:10px}
  h1{font-size:52px;line-height:1.1;font-weight:600;letter-spacing:-.04em}
  .head-meta{text-align:right;font-size:9px;letter-spacing:.08em;color:var(--muted);line-height:2}
  .head-meta b{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
  .feature{max-width:1440px;margin:0 auto;padding:0 64px 54px;display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
  .feature-img img{display:block;width:100%;height:440px;object-fit:cover}
  .feature-copy h2{font-size:46px;line-height:1.1;font-weight:600;letter-spacing:-.045em}
  .feature-copy h2 a:hover{color:var(--blue)}
  .feature-copy .sub{margin-top:9px;font-size:15px;line-height:1.6;color:var(--soft)}
  .feature-copy p{margin-top:15px;max-width:430px;font-size:13.5px;line-height:1.85;color:var(--muted)}
  .feature-copy .meta{margin-top:18px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.05em;color:var(--muted)}
  .feature-copy .meta i{width:3px;height:3px;border-radius:50%;background:var(--line)}
  .feature-copy .meta a{margin-left:8px;color:var(--ink);border-bottom:1px solid var(--line-soft);padding-bottom:3px;font-size:12px}
  .feature-copy .meta a:hover{color:var(--blue);border-color:var(--blue)}
  .foot{border-top:1px solid var(--line)}
  .foot-inner{display:flex;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:36px;font-size:9px;letter-spacing:.1em;color:var(--muted)}
  .foot a:hover{color:var(--blue)}
  .writing-list{border-top:1px solid var(--line);padding-top:36px;padding-bottom:96px}
  .list-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
  .list-head .label{font-size:9.5px;letter-spacing:.16em;color:var(--ink)}
  .list-head .label span{color:var(--muted);letter-spacing:.1em}
  .list-head .count{font-size:9px;letter-spacing:.08em;color:var(--muted)}
  .year-block{padding-top:42px}
  .year-row{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .year-row b{font-size:27px;line-height:1;font-weight:600;letter-spacing:-.04em}
  .year-row span{font-size:10px;letter-spacing:.08em;color:var(--muted)}
  .entries{display:block}
  .entry{display:grid;grid-template-columns:196px minmax(0,1fr);gap:30px;padding:30px 0;border-bottom:1px solid var(--line-soft);align-items:start}
  .entry .thumb{overflow:hidden}
  .entry .thumb img{display:block;width:196px;height:124px;object-fit:cover;transition:opacity .2s ease}
  .entry .meta{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.05em;color:var(--muted)}
  .entry .meta i{width:3px;height:3px;border-radius:50%;background:var(--line)}
  .entry h3{margin-top:6px;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.03em}
  .entry p{margin-top:9px;font-size:14px;line-height:1.8;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:900px}
  .entry:hover h3{color:var(--blue)}
  .entry:hover .thumb img{opacity:.88}
  @media(max-width:900px){
    .year-block{padding-top:32px}
    .entry{grid-template-columns:140px minmax(0,1fr);gap:20px;padding:24px 0}
    .entry .thumb img{width:140px;height:88px}
    .entry h3{font-size:20px}
    .entry p{font-size:13px}
  }
  @media(max-width:560px){
    .year-block{padding-top:26px}
    .entry{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:20px 0}
    .entry .thumb img{width:110px;height:70px}
    .entry h3{font-size:18px}
    .entry p{font-size:12.5px;line-height:1.7}
  }

  @media(max-width:1100px){
    .topbar-inner,.wrap,.head,.feature{padding-left:40px;padding-right:40px}
    .head{grid-template-columns:1fr;gap:16px;padding-top:40px;padding-bottom:26px}
    .head-meta{text-align:left}
    .feature{grid-template-columns:1fr;gap:28px}
    .feature-img img{height:380px}
    .writing-list{padding-bottom:52px}
  }
  @media(max-width:700px){
    .topbar-inner{padding:0 20px;height:54px}
    nav{display:flex;gap:12px;font-size:9.5px}
    .mark span{display:none}
    nav sup{display:none}
    .wrap,.head,.feature{padding-left:20px;padding-right:20px}
    .head{padding-top:28px;padding-bottom:20px}
    h1{font-size:36px}
    .feature{padding-bottom:34px}
    .feature-img img{height:240px}
    .feature-copy h2{font-size:30px}
    .feature-copy .meta{font-size:12px;gap:8px}
    .foot-inner{flex-direction:column;gap:8px}
  }

  /* variant A: narrow + thumbnail */
  .writing-list{max-width:1080px;padding-left:40px;padding-right:40px}
  .list-head{margin-bottom:26px}
  .year-block{padding-top:48px}
  .year-row b{font-size:28px}
  .entry{grid-template-columns:220px minmax(0,1fr);gap:36px;padding:40px 0}
  .entry .thumb img{width:220px;height:140px}
  .entry h3{font-size:26px;margin-top:7px}
  .entry p{font-size:14.5px;line-height:1.8;margin-top:10px;-webkit-line-clamp:3}
  .entry .meta{font-size:10.5px}
  @media(max-width:900px){
    .writing-list{padding-left:20px;padding-right:20px}
    .year-block{padding-top:34px}
    .entry{grid-template-columns:140px minmax(0,1fr);gap:20px;padding:28px 0}
    .entry .thumb img{width:140px;height:88px}
    .entry h3{font-size:20px}
    .entry p{font-size:13.5px}
  }
  @media(max-width:560px){
    .entry{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:22px 0}
    .entry .thumb img{width:110px;height:70px}
    .entry h3{font-size:18px}
    .entry p{font-size:12.5px}
  }