.writing{max-width:900px;margin:0 auto;padding:clamp(40px,6vw,90px) clamp(20px,4vw,40px)}.articleList{flex-direction:column;gap:20px;margin:30px 0 0;padding:0;list-style:none;display:flex}.articleListItem{background:#1a1512;border:1px solid #fff0dc14;border-radius:16px;transition:border-color .2s,transform .2s;overflow:hidden}.articleListItem:hover,.articleListItem:focus-within{border-color:#f5a62359;transform:translateY(-2px)}.articleLink{color:inherit;align-items:center;gap:20px;padding:14px;text-decoration:none;display:flex;position:relative}.articleLink:focus-visible{outline-offset:3px;border-radius:10px;outline:2px solid #f5a623}@media only screen and (width<=768px){.articleLink{flex-direction:column;align-items:flex-start}}.articleCover{aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex-shrink:0;width:160px}@media only screen and (width<=768px){.articleCover{width:100%}}.articleBody{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.articleBody .articleTitle{font-size:1.1rem;font-weight:var(--font-bold);line-height:var(--leading-snug);margin:0;transition:color .2s}.articleLink:hover .articleTitle,.articleLink:focus-visible .articleTitle{color:#f5a623}.articleArrow{color:#c4b8ab;flex-shrink:0;margin-right:10px;font-size:1.2rem;transition:transform .3s cubic-bezier(.22,1,.36,1),color .2s}.articleLink:hover .articleArrow,.articleLink:focus-visible .articleArrow{color:#f5a623;transform:translate(3px,-3px)}@media only screen and (width<=768px){.articleArrow{background:#0009;border-radius:999px;margin:0;padding:4px 10px;font-size:1rem;position:absolute;top:20px;right:20px}}.articleDate{font-size:var(--text-caption);color:#c4b8ab}